.neal-brand {
  gap: clamp(9px, 2vw, 17px);
  padding: 4px 10px 9px;
}

.neal-brand .duh-mark {
  width: clamp(46px, 10vw, 70px);
  height: auto;
  flex: none;
  transform: rotate(-9deg);
}

.neal-brand h1 {
  color: #191912;
  font-family: "Arial Black", "Arial Bold", system-ui, sans-serif;
  font-size: clamp(34px, 7.5vw, 67px);
  font-weight: 950;
  line-height: .98;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.duh-word {
  display: inline-block;
  transform: rotate(-5deg);
}

.duh-bang {
  display: inline-block;
  color: #b93823;
  padding-inline: .025em .06em;
}

@media (prefers-reduced-motion: no-preference) {
  .duh-mark {
    animation: duh-pop 640ms cubic-bezier(.22,.75,.27,1) both;
  }

  .duh-word {
    animation: duh-land 580ms cubic-bezier(.22,.75,.27,1) 95ms both;
  }

  .duh-games .duh-bang {
    animation: duh-accent 500ms cubic-bezier(.22,.75,.27,1) 235ms both;
  }

  .neal-brand:is(:hover, :focus-visible) .duh-mark {
    animation-name: duh-wiggle;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neal-brand, .neal-brand:hover {
    transition: none;
    transform: none;
  }
}

@keyframes duh-pop {
  0% { transform: translateY(9px) scale(.75) rotate(-20deg); }
  60% { transform: translateY(-5px) scale(1.09) rotate(4deg); }
  100% { transform: rotate(-9deg); }
}

@keyframes duh-land {
  0% { transform: translateY(7px) rotate(-10deg); }
  65% { transform: translateY(-3px) rotate(-2deg); }
  100% { transform: rotate(-5deg); }
}

@keyframes duh-accent {
  0%, 100% { transform: rotate(0); }
  45% { transform: translateY(-6px) rotate(10deg); }
}

@keyframes duh-wiggle {
  0%, 100% { transform: rotate(-9deg); }
  45% { transform: translateY(-4px) rotate(7deg); }
}