reverting changes

_sass/_custom.scss

@@ -14,7 +14,7 @@
   --text-muted: #bfbfbf;
   --border-white: #ffffff;
   
-  /* COLORS  */
+  /* COLORS - Accent (use sparingly!) */
   --accent-blue: #4da3ff;
   --accent-blue-dim: #3d8ace;
   --accent-blue-subtle: rgba(77, 163, 255, 0.15);
@@ -38,7 +38,7 @@
   --letter-spacing-wider: 0.16em;
   --letter-spacing-widest: 0.18em;
   
-  /* SPACING SCALE */
+  /* SPACING SCALE (consistent increments) */
   --space-xs: 0.25rem;      /* 4px */
   --space-sm: 0.5rem;       /* 8px */
   --space-md: 1rem;         /* 16px */
@@ -48,8 +48,8 @@
   --space-3xl: 3rem;        /* 48px */
   
   /* BORDERS & RADIUS */
-  --border-radius: 4px;     
-  --border-radius-lg: 10px;
+  --border-radius: 4px;     /* consistent everywhere */
+  --border-radius-lg: 10px; /* only for home title box */
   --border-width: 1px;
   --border-color-subtle: rgba(255, 255, 255, 0.18);
   --border-color-normal: rgba(255, 255, 255, 0.35);
@@ -1210,37 +1210,28 @@ blockquote {
   text-align: center;
 }
 
+
 /* ============================================================================
    GLOBAL MOBILE OVERFLOW FIX
    ============================================================================ */
 
+/* Prevents ANY element from expanding the page width horizontally.
+   This is the single most important rule for the zoom-out bug on mobile. */
 html {
   overflow-x: hidden;
-  max-width: 100vw;
-}
-
-body {
-  overflow-x: hidden;
-  max-width: 100vw;
-  min-width: 0; 
-}
-
-*,
-*::before,
-*::after {
   box-sizing: border-box;
 }
 
-main,
-main > *:not(.dropdown-menu):not(.modal):not(#scroll-to-top) {
-  max-width: 100%;
-}
-
-img:not(#scroll-to-top *) {
-  max-width: 100%;
-  height: auto;
+/* Catch-all: any block element that might overflow */
+*,
+*::before,
+*::after {
+  box-sizing: 100%;
+  box-sizing: border-box;
 }
 
+/* Soakies page uses inline <figure> elements with style="display: inline-block; max-width: 75%"
+   These don't respect overflow-x on their parent. Force them to block on mobile. */
 figure {
   max-width: 100% !important;
 }
@@ -1250,7 +1241,7 @@ figure {
     display: block !important;
   }
 
-
+  /* The grid figures on Soakies (side-by-side photos) stack on mobile */
   figure[style*="grid-template-columns"] {
     display: block !important;
   }
@@ -1269,28 +1260,30 @@ figure {
    SCROLL TO TOP - FULL STYLING (all viewports)
    ============================================================================ */
 
-#scroll-to-top {
-  position: fixed;
-  bottom: 4.5rem;
-  right: 1rem;
-  z-index: 9999;              
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
+  #scroll-to-top {
+    position: fixed;
+    bottom: 4.5rem;
+    right: 1rem;
+    z-index: 9999;              
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
 #scroll-to-top:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 }
 
+
 /* ============================================================================
    LONG LINKS & BIBLIOGRAPHY - OVERFLOW FIX
    ============================================================================ */
 
+/* Global link wrapping - catches everything */
 a {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
+/* Bibliography section - Jekyll renders ### Bibliography as h3, content follows as <p> tags */
 .bibliography,
 h3 + ol,
 h3 + ul,
@@ -1301,6 +1294,7 @@ h3 + p {
   overflow-wrap: break-word;
 }
 
+/* Footnotes (extends your existing fix to be more thorough) */
 .footnotes {
   overflow-x: hidden;
   max-width: 100%;
@@ -1320,18 +1314,20 @@ h3 + p {
   max-width: 100%;
 }
 
+/* Jekyll footnote markers */
 .footnote-ref,
 .footnote-backref {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
+/* Any <p> or <li> that contains long URLs */
 p, li, td {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
-/* Tables */
+/* Tables - prevent horizontal overflow */
 table {
   max-width: 100%;
   overflow-x: auto;