bootstrap removal phase 3: replace utilities/api with hand-rolled layer

The Bootstrap utilities API generated hundreds of responsive variants; the theme
uses ~35 utility classes. Dropped the utilities map, helpers, and utilities/api
imports; hand-rolled the used classes (spacing, d-flex, flex align/justify,
float-end, overflow-hidden, fs-2/5, fw-bold/light, lh-base, text-muted, bg-dark,
+ md/lg/xl responsive variants) with values matching the former output exactly.
mb-n1 omitted (BS never generated negative margins — it was a no-op).

v4-style.min.css 194,480 -> 123,246 bytes (-71 KB; -87 KB / -41% across phases 1-3).

css/styles.scss

@@ -55,17 +55,18 @@ $enable-negative-margins: true;
 
 /***********************************************************
 ########## Bootstrap 5 — subset to used parts #############
-   Being removed incrementally (Phase 1, 2026-07-13).
+   Being removed incrementally (Phases 1-3, 2026-07-13).
    Dropped (unused / migrated): dropdown, button-group, accordion,
    breadcrumb, progress, toasts, modal, tooltip, popover, spinners,
    placeholders, carousel (→ native .dw-carousel), tables, close,
-   images (→ .img-fluid one-liner below).
-   Kept: grid + nav/navbar + forms/buttons + list-group + card +
-   pagination + alert + badge (last.fm stat counts) + utilities API.
+   images, badge, alert, pagination (→ custom CSS below), helpers,
+   and the whole utilities API (→ hand-rolled ~35-class layer below —
+   the API generated hundreds of responsive variants; the theme uses ~35).
+   Kept for now: grid + nav/navbar + forms/buttons + list-group + card.
+   Phase 4 target: grid → WordPress block grid, then drop Bootstrap.
    (offcanvas nav is self-contained CSS via :target — see .dw-offcanvas.)
 ************************************************************/
 
-@import '../node_modules/bootstrap/scss/utilities';
 @import '../node_modules/bootstrap/scss/root';
 @import '../node_modules/bootstrap/scss/reboot';
 @import '../node_modules/bootstrap/scss/type';
@@ -78,8 +79,6 @@ $enable-negative-margins: true;
 @import '../node_modules/bootstrap/scss/navbar';
 @import '../node_modules/bootstrap/scss/card';
 @import '../node_modules/bootstrap/scss/list-group';
-@import '../node_modules/bootstrap/scss/helpers';
-@import '../node_modules/bootstrap/scss/utilities/api';
 
 // ---- replacements for dropped Bootstrap partials (Phase 1 + 2) ----
 
@@ -134,6 +133,52 @@ $enable-negative-margins: true;
   list-style: none;
 }
 
+// ---- utilities (hand-rolled; replaces bootstrap utilities/api + helpers) ----
+// Only the ~35 utility classes actually used in the theme markup; values match
+// the former Bootstrap output exactly. Spacers: 1=.25 2=.5 3=1 4=1.5 5=3rem.
+// Breakpoints: md=768px, lg=992px, xl=1200px. (mb-n1 was a no-op — BS doesn't
+// generate negative margins by default — so it's intentionally omitted.)
+.mt-0 { margin-top: 0 !important; }
+.mt-1 { margin-top: .25rem !important; }
+.mt-2 { margin-top: .5rem !important; }
+.mt-3 { margin-top: 1rem !important; }
+.mt-4 { margin-top: 1.5rem !important; }
+.mt-5 { margin-top: 3rem !important; }
+.mb-1 { margin-bottom: .25rem !important; }
+.mb-2 { margin-bottom: .5rem !important; }
+.mb-3 { margin-bottom: 1rem !important; }
+.mb-5 { margin-bottom: 3rem !important; }
+.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
+.pt-3 { padding-top: 1rem !important; }
+.pt-5 { padding-top: 3rem !important; }
+.pb-2 { padding-bottom: .5rem !important; }
+.pb-5 { padding-bottom: 3rem !important; }
+.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
+.d-flex { display: flex !important; }
+.align-items-end { align-items: flex-end !important; }
+.justify-content-center { justify-content: center !important; }
+.float-end { float: right !important; }
+.overflow-hidden { overflow: hidden !important; }
+.fs-2 { font-size: calc(1.325rem + .9vw) !important; }
+.fs-5 { font-size: 1.25rem !important; }
+.fw-bold { font-weight: 700 !important; }
+.fw-light { font-weight: 300 !important; }
+.lh-base { line-height: 1.5 !important; }
+.text-muted { color: rgba(33, 37, 41, .75) !important; }
+.bg-dark { background-color: rgb(83, 87, 99) !important; }
+
+@media (min-width: 768px) {
+  .mt-md-0 { margin-top: 0 !important; }
+  .text-md-start { text-align: left !important; }
+  .text-md-end { text-align: right !important; }
+}
+@media (min-width: 992px) {
+  .d-lg-block { display: block !important; }
+}
+@media (min-width: 1200px) {
+  .fs-2 { font-size: 2rem !important; }
+}
+
 /* Bootstrap Icons font dropped (2026-06-19): the header's 8 nav icons are now
    inline SVG in parts/header.html, so the full icon font + its ~2000 CSS rules
    are no longer imported. */