next round of horiztonal scroll fixes

_sass/_custom.scss

@@ -38,7 +38,7 @@
   --letter-spacing-wider: 0.16em;
   --letter-spacing-widest: 0.18em;
   
-  /* SPACING SCALE (consistent increments) */
+  /* SPACING SCALE */
   --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;     /* consistent everywhere */
-  --border-radius-lg: 10px; /* only for home title box */
+  --border-radius: 4px;    
+  --border-radius-lg: 10px; 
   --border-width: 1px;
   --border-color-subtle: rgba(255, 255, 255, 0.18);
   --border-color-normal: rgba(255, 255, 255, 0.35);
@@ -1136,7 +1136,7 @@ blockquote {
   transition: background-color var(--transition-normal);
 }
 
-/* Middle line - using a span */
+/* Middle line */
 .navbar-toggler-icon {
   background: linear-gradient(
     to bottom,
@@ -1215,23 +1215,25 @@ blockquote {
    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;
-  box-sizing: border-box;
 }
 
-/* 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. */
+img,
+video,
+iframe,
+embed,
+object {
+  max-width: 100%;
+  height: auto;
+}
+
 figure {
   max-width: 100% !important;
 }
@@ -1241,7 +1243,6 @@ figure {
     display: block !important;
   }
 
-  /* The grid figures on Soakies (side-by-side photos) stack on mobile */
   figure[style*="grid-template-columns"] {
     display: block !important;
   }
@@ -1260,30 +1261,28 @@ 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,
@@ -1294,7 +1293,6 @@ h3 + p {
   overflow-wrap: break-word;
 }
 
-/* Footnotes (extends your existing fix to be more thorough) */
 .footnotes {
   overflow-x: hidden;
   max-width: 100%;
@@ -1314,20 +1312,17 @@ 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 - prevent horizontal overflow */
 table {
   max-width: 100%;
   overflow-x: auto;