.logo {
  display: block;
  width: 100px;     /* actual size */
  height: auto;
  max-width: 100%;  /* safety */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.logo-link:hover .logo {
  opacity: 0.3;
  transform: translateY(1px);
}

.logo-layout {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;            /* space between symbol & text */
  margin: 0 0 var(--space-sm) 0;
}

/* Tablet and up (Desktop) */
@media (min-width: 768px) {
  .logo-layout {
    gap: 0.75rem;
    margin-bottom: var(--space-md);
  }

  .logo {
    width: 200px;
    max-width: 100%;  /* safety */
  }
}