refactor: art gallery → CSS scroll-snap (drop Bootstrap carousel + jQuery)

Replace the #gallery Bootstrap carousel with a native scroll-snap track:
- page-art.php: .carousel/.carousel-item → .dw-carousel scroll-snap markup
  (same lead image + paintings query, leaner wrapper).
- js/art.js: rewritten pure-vanilla — scroll-snap prev/next + arrow keys, plus
  the navbar-scroll chrome (dw_hidenav) ported off jQuery; dropped the dead
  #loader / .nav-toggle lines (neither exists on this page).
- css/styles.scss: reusable .dw-carousel scroll-snap styles.

Behavior changes by design: no 5s autoplay; round prev/next buttons instead of
BS chevrons. Swipe/trackpad/scrollbar now native. BS carousel SCSS stays until
studio/about/index also migrate off it.

css/styles.scss

@@ -161,3 +161,53 @@ $enable-negative-margins: true;
     transition: none;
   }
 }
+
+// Gallery carousel — CSS scroll-snap (replaces the Bootstrap carousel on the
+// art page). Swipe / trackpad / scrollbar natively; prev-next + arrow keys via
+// a tiny vanilla script (js/art.js). No autoplay (was 5s) by design.
+.dw-carousel {
+  position: relative;
+}
+.dw-carousel-track {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none; // Firefox
+  &::-webkit-scrollbar {
+    display: none; // WebKit
+  }
+}
+.dw-carousel-slide {
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+  display: flex;
+  justify-content: center;
+}
+.dw-carousel-prev,
+.dw-carousel-next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  width: 3rem;
+  height: 3rem;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  font-size: 1.75rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.dw-carousel-prev {
+  left: 1rem;
+}
+.dw-carousel-next {
+  right: 1rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dw-carousel-track {
+    scroll-behavior: auto;
+  }
+}

js/art.js

@@ -1,57 +1,46 @@
-
-jQuery(document).ready(function($) {
-
-	$(window).bind('load', function() {
-		$('#loader').fadeOut(100);
-	});
-
-	$('.nav-toggle').on('touchstart click', function(e) {
-		e.preventDefault();
-		$( this ).toggleClass( 'active' );
-	});
-
-	$(function dw_hidenav() {
-		var headerHeight = $('.navbar').height();
-		$(window).on('scroll', { previousTop: 0 },
-			function() {
-			var currentTop = $(window).scrollTop();
-			if (currentTop < this.previousTop) {
-				if (currentTop > 0 && $('.navbar').hasClass('fixed')) {
-						$('.navbar').addClass('visible');
-						$('.site-title a').removeClass('light');
-					} else {
-						$('.navbar').removeClass('visible fixed');
-					}
-			}
-			else {
-				$('.navbar').removeClass('visible');
-				if (currentTop > headerHeight && !$('.navbar').hasClass('fixed')) $('.navbar').addClass('fixed');
-			}
-			this.previousTop = currentTop;
-			}
-		);
-	});
-
-	$('#gallery').carousel({
-		interval: 5000,
-		wrap: true,
-	});
-
-	$(document).bind('keyup', function(e) {
-	    if(e.which === 39){
-			$('#gallery').carousel('next');
-	    }
-	    else if(e.which === 37){
-			$('#gallery').carousel('prev');
-	    }
-	});
-
-	$('.prev').click(function() {
-	  $('#gallery').carousel('prev');
-	});
-
-	$('.next').click(function() {
-	  $('#gallery').carousel('next');
-	});
-
-});
+// Art page — vanilla JS (no jQuery, no Bootstrap carousel).
+
+// Navbar hide/show on scroll (ported from the shared jQuery dw_hidenav).
+(function () {
+  const navbar = document.querySelector('.navbar');
+  if (!navbar) return;
+  const title = document.querySelector('.site-title a');
+  const headerHeight = navbar.offsetHeight;
+  let previousTop = 0;
+  window.addEventListener('scroll', function () {
+    const currentTop = window.scrollY;
+    if (currentTop < previousTop) {
+      if (currentTop > 0 && navbar.classList.contains('fixed')) {
+        navbar.classList.add('visible');
+        if (title) title.classList.remove('light');
+      } else {
+        navbar.classList.remove('visible', 'fixed');
+      }
+    } else {
+      navbar.classList.remove('visible');
+      if (currentTop > headerHeight && !navbar.classList.contains('fixed')) {
+        navbar.classList.add('fixed');
+      }
+    }
+    previousTop = currentTop;
+  }, { passive: true });
+})();
+
+// Gallery — scroll-snap prev/next buttons + arrow keys (replaces the BS carousel).
+(function () {
+  const track = document.querySelector('.dw-carousel-track');
+  if (!track) return;
+  const step = () =>
+    track.firstElementChild
+      ? track.firstElementChild.getBoundingClientRect().width
+      : track.clientWidth;
+  const scroll = (dir) => track.scrollBy({ left: dir * step(), behavior: 'smooth' });
+  const prev = document.querySelector('.dw-carousel-prev');
+  const next = document.querySelector('.dw-carousel-next');
+  if (prev) prev.addEventListener('click', () => scroll(-1));
+  if (next) next.addEventListener('click', () => scroll(1));
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'ArrowRight') scroll(1);
+    else if (e.key === 'ArrowLeft') scroll(-1);
+  });
+})();

page-art.php

@@ -1,34 +1,20 @@
 <?php get_header(); ?>
 <div id="gallery-wrap" class="container-fluid overflow-hidden art-gallery">
-  <div id="gallery" class="carousel slide" data-bs-ride="carousel">
-    <div class="leader pb-5">
-      <div class="row mt-5">
-        <div class="carousel-inner">
-          <div class="carousel-item active gallery-image">
-            <div class="d-flex justify-content-center">
-              <img class="art-image" src="<?php echo get_template_directory_uri(); ?>/img/lemon-mater.jpg" alt="<?php the_title(); ?>"/>
-            </div>
-          </div>
-          <?php query_posts('category_name=paintings&showposts=12'); ?>
-          <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
-          <div class="carousel-item gallery-image">
-            <div class="d-flex justify-content-center">
-              <?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'full'); ?>
-              <img class="art-image img-fluid" src="<?php echo $img_url[0];?>" alt="<?php the_title(); ?>"/>
-            </div>
-          </div>
-          <?php endwhile; ?>
-        </div>
-        <button class="carousel-control-prev" type="button" data-bs-target="#gallery" data-bs-slide="prev">
-          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-          <span class="visually-hidden">Previous</span>
-        </button>
-        <button class="carousel-control-next" type="button" data-bs-target="#gallery" data-bs-slide="next">
-          <span class="carousel-control-next-icon" aria-hidden="true"></span>
-          <span class="visually-hidden">Next</span>
-        </button>
+  <div class="dw-carousel leader pb-5">
+    <div class="dw-carousel-track mt-5" tabindex="0" role="region" aria-roledescription="carousel" aria-label="Painting gallery">
+      <div class="dw-carousel-slide">
+        <img class="art-image" src="<?php echo get_template_directory_uri(); ?>/img/lemon-mater.jpg" alt="<?php the_title(); ?>"/>
+      </div>
+      <?php query_posts('category_name=paintings&showposts=12'); ?>
+      <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
+      <div class="dw-carousel-slide">
+        <?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'full'); ?>
+        <img class="art-image img-fluid" src="<?php echo $img_url[0];?>" alt="<?php the_title(); ?>"/>
       </div>
+      <?php endwhile; ?>
     </div>
+    <button class="dw-carousel-prev" type="button" aria-label="Previous painting">&lsaquo;</button>
+    <button class="dw-carousel-next" type="button" aria-label="Next painting">&rsaquo;</button>
   </div>
 </div>
 <div class="container">