.brand {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.15;
  perspective: 240px;
}

.brand-loc { color: #000; }

.brand-twist {
  display: inline-grid;
  color: var(--green);
  transform-style: preserve-3d;
  animation: logo-mirror-twist 6s ease-in-out infinite;
}

.brand-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.brand-back { transform: rotateY(180deg); }

/* Hold each readable face, then mirror-twist to the other every 3 seconds. */
@keyframes logo-mirror-twist {
  0%, 40% { transform: rotateY(0deg); }
  50%, 90% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

footer .brand { font-size: 28px; }

@media (max-width: 700px) {
  .site-header .brand { font-size: 32px; }
}

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