Refactor code structure for improved readability and maintainability

data/static/css/styles.css

@@ -1,8 +1,19 @@
+/* ── Brand font ────────────────────────────────────────────
+   ASB uses Overpass (open-source, SIL OFL) as their primary brand
+   typeface. Self-hosted as a single variable woff2 covering 400–700. */
+@font-face {
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400 700;
+    font-display: swap;
+    src: url(../fonts/overpass-latin.woff2) format('woff2');
+}
+
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-family: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 :root {
     /* ASB brand yellow — used for highlights, hover, and the nav accent bar. */