/* 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 */
}

/* Editorial / Wagtail rich text */
.prose h2 {
  font-size: 1.875rem; /* text-3xl */
  line-height: 1.2;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.prose h3 {
  font-size: 1.5rem; /* text-2xl */
  line-height: 1.3;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.prose p {
  margin: 1rem 0;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.prose a {
  text-decoration: underline;
}