Mobile CSS: fix narrow content, missing backgrounds, horizontal scroll

- Content cards (classic + block) had a hardcoded 96px (1in) padding with no
  mobile override, leaving a ~150px content column on phones. Drop all cards to
  1.5rem below 768px.
- Remove the stale @media(max-width:667px) .single { background:none!important;
  box-shadow:none!important } that wiped the dark body bg off single posts on
  mobile (leftover from the old white-article design).
- .leader zeroes horizontal padding, so on mobile bare .row negative margins bled
  past the viewport and cards pinned to the screen edge. Add 15px gutters to
  .container.leader on mobile so the dark body frames the card as on desktop.
- Add overflow-wrap:break-word to content so long URLs can't force horizontal
  scroll on block pages (they don't inherit the .container word-wrap).

Verified 0px horizontal overflow on single/contact/music at 390px.

style.css

@@ -239,17 +239,9 @@ body.desk .container.leader {
   max-width: 1280px;
 }
 @media (max-width: 667px) {
-	body {
-
-	}
-	.single {
-		padding: 10px 0px;
-		background: none !important;
-		box-shadow: none !important;
-	}
-	.archive {
-		padding: 10px 0px;
-	}
+    /* (legacy .single/.archive full-bleed overrides removed 2026-07-22 — they
+       stripped the dark body background off single posts on mobile and are
+       leftovers from the old white-article design; cards handle bg now.) */
     .super-duper {
     	font-size: 63px;
     }
@@ -1667,6 +1659,13 @@ h2.entry-title {
 .entry-summary {
 	clear: both;
 }
+/* Break long URLs / unbroken strings so they can't force horizontal scroll on
+   phones (block pages don't inherit the .container word-wrap). */
+.entry-content,
+.entry-summary,
+#content {
+	overflow-wrap: break-word;
+}
 .entry-content p {
 	font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
 }
@@ -1678,6 +1677,36 @@ h2.entry-title {
 	padding: 96px; /* 1in APA-style margins on all sides (96px = 1in) */
 	border-radius: 6px;
 }
+/* Mobile: the 96px (1in) card padding leaves almost no content column on a phone
+   (~150px on a 375px viewport), which read as an "abnormally narrow" content area.
+   Drop every content card to 1.5rem below 768px. Covers the classic cards
+   (projects/desk/music/archive/contact/sitemap) and the block cards
+   (page/single .wp-block-group.entry-content + search/404). */
+@media (max-width: 767.98px) {
+	.projects-card,
+	body.desk .entry-content,
+	#music.entry-content,
+	body.archive .entry-content,
+	body.contact #content,
+	body.sitemap #content,
+	.wp-block-group.entry-content {
+		padding: 1.5rem;
+	}
+	body.search main > .wp-block-group,
+	body.error404 main > .wp-block-group {
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
+	}
+	/* .leader zeroes horizontal padding (cards span the full centered width on
+	   desktop). On a phone that pins cards to the screen edge and lets bare .row
+	   negative margins (-0.75rem) bleed past the viewport → horizontal scroll.
+	   Restore 15px gutters on mobile; the dark body then frames the card as it
+	   does on desktop. */
+	.container.leader {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+}
 /* Block templates (search / 404 / page.html): the navbar's site-title is
    float:right, so it collapses the header and block <main> content would ride up
    next to it. Clear the header the way the classic .container pages do, so every