/* Static site extras (animations/utilities) */
.animate-fade-in { animation: fadeIn .6s ease-out both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(20px);} to {opacity:1; transform:none;} }

/* Smooth transitions for links */
a { transition: color .2s ease; }

/* Container tweaks for mobile spacing under fixed nav */
#home, #services, #instruments, #about, #contact { scroll-margin-top: 84px; }

/* Aspect ratio utility for tiles */
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-4 { aspect-ratio: 3 / 4; }
.thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Header brand cycling */
.fade-swap { display:inline-block; opacity:1; transition: opacity .4s ease, transform .4s ease; will-change: opacity, transform; }
.fade-swap.is-fading { opacity:0; transform: translateY(6px); }

.reset {
    all: unset;
}

.figure-inline {
  display: inline-block;
  vertical-align: top;   /* keeps tops aligned instead of baseline */
  margin: 0 1rem 1rem 0; /* spacing between items */
}