/* Approved raccoon identity. Keep the surrounding site layout and navigation. */
.brand-raccoon, .brand-mascot { flex-shrink: 0; }
.brand-raccoon picture, .brand-mascot picture { display: block; }
.brand-logo { display: block; width: 216px; height: 81px; object-fit: contain; }
.brand-character { transform-origin: 510px 700px; }
.brand-raccoon.is-greeting .brand-character { animation: mascot-greeting 900ms var(--ease) both; }
@keyframes mascot-greeting {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-5deg); }
  68% { transform: rotate(2deg); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .brand-character { transition: transform 180ms var(--ease); }
  .brand-raccoon:hover:not(:focus-visible) .brand-character { transform: rotate(-3deg); }
}
.brand-raccoon:focus-visible .brand-character,
.keyboard .brand-character { animation: none; transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .brand-character { animation: none !important; transition: none !important; transform: none !important; }
}
.brand-mascot-image { display: block; width: 80px; height: 80px; object-fit: contain; }
@media (max-width: 1100px) and (min-width: 761px) {
  .brand-logo { width: 192px; height: 72px; }
}
@media (max-width: 760px) {
  .brand-logo { width: 166px; height: 62.25px; }
  .brand-mascot-image { width: 72px; height: 72px; }
}
@media (max-width: 360px) {
  .brand-logo { width: 140px; height: 52.5px; }
}