fixing mobile spacing issues

_sass/_custom.scss

@@ -936,19 +936,6 @@ blockquote {
     margin-left: auto;
     margin-right: auto;
   }
-
-  #scroll-to-top {
-    position: fixed;
-    bottom: 4.5rem;
-    right: var(--space-md);
-    z-index: 9999;              
-    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
-  }
-}
-
-#scroll-to-top:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 }
 
 /* ============================================================================
@@ -966,7 +953,6 @@ blockquote {
   padding: 0 var(--space-xl);
   margin: 0 auto;
 }
-
 #about-contents-wrapper ul {
   font-size: var(--text-base);
 }
@@ -1224,54 +1210,178 @@ blockquote {
   text-align: center;
 }
 
+
 /* ============================================================================
-   SEARCH SUGGESTIONS
+   GLOBAL MOBILE OVERFLOW FIX
    ============================================================================ */
 
-.suggestions-container {
-  position: absolute;
-  width: 100%;
-  max-height: 200px;
-  overflow-y: auto;
-  background-color: white;
-  border: var(--border-width) solid #ccc;
-  z-index: 100;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+/* 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;
 }
 
-.suggestion-item {
-  padding: 8px;
-  cursor: pointer;
+body {
+  overflow-x: hidden;
+  max-width: 100vw;
+  /* Forces the body to respect the viewport in landscape too */
+  min-width: 0;
 }
 
-.suggestion-item:hover {
-  background-color: #f0f0f0;
+/* Catch-all: any block element that might overflow */
+*,
+*::before,
+*::after {
+  max-width: 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;
+}
+
+@media (max-width: 768px) {
+  figure[style*="inline-block"] {
+    display: block !important;
+  }
+
+  /* The grid figures on Soakies (side-by-side photos) stack on mobile */
+  figure[style*="grid-template-columns"] {
+    display: block !important;
+  }
+
+  figure[style*="grid-template-columns"] > div {
+    margin-bottom: 1rem;
+  }
+
+  figure[style*="grid-template-columns"] img {
+    max-width: 100% !important;
+    width: 100% !important;
+  }
+}
+
 /* ============================================================================
-   FOOTNOTES
+   SCROLL TO TOP - FULL STYLING (all viewports)
    ============================================================================ */
-  .footnotes a {
-  display: inline-block;
+
+#scroll-to-top {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 9999;
+  width: 40px;
+  height: 40px;
+  display: none; /* JS handles show/hide */
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.65);
+  border: var(--border-width) solid rgba(255, 255, 255, 0.35) !important;
+  border-radius: 50%;
+  color: rgba(255, 255, 255, 0.85) !important;
+  text-decoration: none;
+  transition: border-color var(--transition-normal), color var(--transition-normal), transform var(--transition-normal);
+  /* Keep it out of the layout flow entirely */
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+#scroll-to-top[style*="block"] {
+  display: flex !important;
+}
+
+#scroll-to-top:hover {
+  border-color: rgba(255, 255, 255, 0.75);
+  color: #ffffff !important;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+#scroll-to-top svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+@media (max-width: 768px) {
+  #scroll-to-top {
+    bottom: 1rem;
+    right: 1rem;
+    width: 36px;
+    height: 36px;
+  }
+}
+
+/* ============================================================================
+   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,
+h3 + p {
+  overflow-x: hidden;
+  max-width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* Footnotes (extends your existing fix to be more thorough) */
+.footnotes {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
+.footnotes p,
+.footnotes ol li {
   word-wrap: break-word;
   overflow-wrap: break-word;
   max-width: 100%;
-  text-overflow: ellipsis;
 }
- 
- @media (max-width: 768px) {
-   .footnotes p {
-     font-size: 14px;
-   }
- 
-   .footnotes a {
-     font-size: 12px;
-   }
- }
- .footnotes p {
-   word-wrap: break-word;
-   word-break: break-all;
- }
- 	.footnotes {
-   overflow-x: hidden;
-   max-width: 100%;
- }
+
+.footnotes a {
+  display: inline;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  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;
+  display: block;
+}
+
+@media (max-width: 768px) {
+  .footnotes p,
+  .footnotes ol li {
+    font-size: 0.875rem;
+  }
+
+  .footnotes a {
+    font-size: 0.8rem;
+  }
+}