Restore optimized homepage carousel

css/site.css

@@ -22,6 +22,133 @@ body.custom-background { background-color: #ffffff; }
     width: 100%;
 }
 
+/* Lightweight homepage carousel with a fixed aspect ratio to prevent layout shift. */
+.home-carousel {
+  position: relative;
+  width: 100%;
+  max-width: 1200px;
+  aspect-ratio: 24 / 7;
+  margin: 30px auto 38px;
+  overflow: hidden;
+  background: #f7f7f2;
+}
+
+.home-carousel-track,
+.home-carousel-slide,
+.home-carousel-slide > a,
+.home-carousel-slide picture {
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+
+.home-carousel-slide {
+  z-index: 0;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 500ms ease;
+}
+
+.home-carousel-slide.is-active {
+  z-index: 1;
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.home-carousel-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.home-carousel-caption {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  bottom: 0;
+  padding: 14px 22px;
+  color: #0e2012;
+  background: rgba(252, 250, 250, 0.82);
+  font-family: "Bebas Neue";
+  font-size: 22px;
+  line-height: 1.2;
+}
+
+.home-carousel-control,
+.home-carousel-dots button {
+  border: 0;
+  cursor: pointer;
+}
+
+.home-carousel-control {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 48px;
+  margin: 0;
+  padding: 0 0 4px;
+  border-radius: 0;
+  color: #fff;
+  background: rgba(19, 18, 17, 0.62);
+  font: 42px/1 Arial, sans-serif;
+  transform: translateY(-50%);
+  transition: background-color 180ms ease;
+}
+
+.home-carousel-control:hover {
+  background: rgba(19, 18, 17, 0.86);
+}
+
+.home-carousel-previous {
+  left: 14px;
+}
+
+.home-carousel-next {
+  right: 14px;
+}
+
+.home-carousel-dots {
+  position: absolute;
+  z-index: 3;
+  right: 16px;
+  bottom: 14px;
+  display: flex;
+  gap: 8px;
+}
+
+.home-carousel-dots button {
+  width: 11px;
+  height: 11px;
+  margin: 0;
+  padding: 0;
+  border: 2px solid rgba(255, 255, 255, 0.95);
+  border-radius: 50%;
+  background: rgba(19, 18, 17, 0.45);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+}
+
+.home-carousel-dots button.is-active {
+  background: #89c76b;
+}
+
+.home-carousel-control:focus-visible,
+.home-carousel-dots button:focus-visible {
+  outline: 3px solid #89c76b;
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .home-carousel-slide {
+    transition: none;
+  }
+}
+
 /* Mobile-specific fix for the header image */
 @media (max-width: 768px) {
     #bg_image {
@@ -30,6 +157,34 @@ body.custom-background { background-color: #ffffff; }
         width: 100%; /* Let the image adjust to screen width */
         height: auto; /* Maintain aspect ratio */
     }
+
+    .home-carousel {
+      margin: 15px auto 24px;
+    }
+
+    .home-carousel-control {
+      width: 34px;
+      height: 40px;
+      font-size: 34px;
+    }
+
+    .home-carousel-previous {
+      left: 8px;
+    }
+
+    .home-carousel-next {
+      right: 8px;
+    }
+
+    .home-carousel-caption {
+      padding: 8px 12px;
+      font-size: 17px;
+    }
+
+    .home-carousel-dots {
+      right: 10px;
+      bottom: 9px;
+    }
 }
 /* Shortcodes Ultimate column rule used by exported content. */
 .su-column-size-1-4{