diff --git a/stacks/news-digest/templates/style.css b/stacks/news-digest/templates/style.css
index f6b5c78..d9a63ba 100644
--- a/stacks/news-digest/templates/style.css
+++ b/stacks/news-digest/templates/style.css
@@ -260,7 +260,9 @@ a:hover { color: var(--accent); }
 
 .desk-head {
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  /* num | title | count | collapse — explicit columns so the
+     collapse button doesn't auto-flow into the desk-sub row. */
+  grid-template-columns: auto 1fr auto auto;
   align-items: baseline;
   column-gap: 16px;
   padding-bottom: 14px;
@@ -310,11 +312,13 @@ a:hover { color: var(--accent); }
    persisted in localStorage by section id (#world, #local, etc), so
    each device remembers per-user preference. */
 .desk-collapse {
+  grid-column: 4 / 5;
+  grid-row: 1 / 2;
+  align-self: center;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  padding: 2px 6px;
-  margin-left: 12px;
+  padding: 4px 8px;
   font-family: var(--font-mono);
   font-size: 14px;
   line-height: 1;
@@ -880,7 +884,11 @@ a:hover { color: var(--accent); }
 }
 
 /* -------------------------------------------------------------------------
-   responsive
+   responsive — two breakpoints:
+     ≤ 720 px : tablet / narrow desktop. Soften the layout but still
+                room for two-column-ish.
+     ≤ 480 px : true phone. Strip the rail, hide section numbers, tighten
+                everything for a single-thumb scroll.
    ------------------------------------------------------------------------- */
 
 @media (max-width: 720px) {
@@ -888,30 +896,64 @@ a:hover { color: var(--accent); }
   .masthead-inner {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;
+    padding: 24px var(--pad-x) 16px;
+    row-gap: 12px;
   }
   .masthead-brand,
   .masthead-edition,
   .masthead-meta { grid-column: 1 / 2; }
-  .masthead-edition { justify-content: flex-start; }
-  .edition-stamp { font-size: 18px; }
-  .masthead-meta { grid-template-columns: 1fr; gap: 6px; }
-  .desk-title { font-size: 28px; }
-  .desk-head { grid-template-columns: auto 1fr; row-gap: 6px; }
-  .desk-sub { grid-column: 1 / 3; padding-left: 0; }
-  .desk-count { display: none; }
-  .item { grid-template-columns: 64px 1fr; column-gap: 14px; }
-  .item-rail { padding-top: 4px; }
+  .masthead-edition { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
+  .edition-stamp { font-size: 16px; padding: 3px 8px; }
+  .masthead-meta {
+    grid-template-columns: 1fr;
+    gap: 6px;
+    padding-top: 12px;
+  }
+  .meta-row { font-size: 10.5px; flex-wrap: wrap; }
+
+  .jumpnav ol { gap: 18px; padding: 10px var(--pad-x); }
+
+  /* Desk header: num / title row 1, sub spans below, count + collapse
+     pushed to row 1 right-side. */
+  .desk-head {
+    grid-template-columns: auto 1fr auto;
+    row-gap: 6px;
+  }
+  .desk-num { padding-top: 2px; }
+  .desk-title { font-size: 26px; }
+  .desk-sub {
+    grid-column: 1 / 4;
+    padding-left: 0;
+    padding-bottom: 0;
+    align-self: start;
+  }
+  .desk-count { font-size: 10px; align-self: center; }
+  .desk-collapse {
+    grid-column: 3 / 4;
+    grid-row: 1 / 2;
+    margin-left: 4px;
+    /* Bigger touch target for thumbs. */
+    padding: 6px 10px;
+    font-size: 16px;
+  }
+
+  /* Items — keep the rail but compact it. */
+  .item { grid-template-columns: 60px 1fr; column-gap: 12px; }
+  .item-rail { padding-top: 4px; gap: 4px; }
   .chip { font-size: 9.5px; padding: 1px 6px; }
   .item-title { font-size: 18px; }
   .item-tldr { font-size: 14px; }
+
   .colophon-inner { grid-template-columns: 1fr; }
-  /* On touch screens there's no hover, so the × always shows. Slightly
-     bigger tap target too. */
-  .item-hide { opacity: 1; width: 28px; height: 28px; font-size: 20px; }
+
+  /* On touch screens there's no hover, so the × always shows.
+     Slightly bigger tap target too (44×44 minimum is the WCAG ask;
+     28 is the visible bullseye, padded to ~44 effective via the
+     parent .item gutter). */
+  .item-hide { opacity: 1; width: 30px; height: 30px; font-size: 20px; }
   .hidden-tray { padding: 12px 14px; }
 
-  /* Headlines: stack title / source / time / tldr vertically on narrow
-     screens so the title gets the full width. */
+  /* Headlines: stack title / source / time / tldr vertically. */
   .headline {
     grid-template-columns: 1fr;
     gap: 4px;
@@ -925,5 +967,74 @@ a:hover { color: var(--accent); }
     grid-row: auto;
   }
   .headline-time { text-align: left; }
-  .headline-tldr { font-size: 13.5px; }
+  .headline-tldr { font-size: 14px; }
+}
+
+@media (max-width: 480px) {
+  :root { --pad-x: 14px; }
+
+  /* Masthead: shrink the brand strip, drop the edition number badge. */
+  .masthead-inner { padding: 18px var(--pad-x) 12px; }
+  .brand-glyph { font-size: 26px; }
+  .brand-mark { font-size: 12px; letter-spacing: .14em; }
+  .edition-num { display: none; }
+  .archive-link { font-size: 10px; }
+
+  .jumpnav ol {
+    gap: 14px;
+    font-size: 10.5px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+  .jumpnav { -webkit-overflow-scrolling: touch; }
+
+  /* Phone: drop the section number badge AND the rail. Chips for
+     reddit cards float into the body inline (the "▲ 234" stays
+     useful but the column itself is wasteful at this width). */
+  .desk-num { display: none; }
+  .desk-head { grid-template-columns: 1fr auto; column-gap: 10px; }
+  .desk-title { font-size: 22px; }
+  .desk-sub { grid-column: 1 / 3; }
+  .desk-count { display: none; }
+  .desk-collapse { grid-column: 2 / 3; padding: 8px 12px; }
+
+  /* Strip the rail entirely; chips go inline above the title. Keeps
+     score/comment context but reclaims the 60px gutter for content. */
+  .item {
+    grid-template-columns: 1fr;
+    column-gap: 0;
+    row-gap: 6px;
+    padding-bottom: 18px;
+  }
+  .item-rail {
+    flex-direction: row;
+    align-items: center;
+    align-self: start;
+    gap: 6px;
+    padding-top: 0;
+  }
+  .chip { font-size: 9px; padding: 1px 5px; }
+  .item-title { font-size: 17px; line-height: 1.3; }
+  .item-tldr { font-size: 13.5px; }
+  .item-foot { gap: 10px; font-size: 10px; }
+  .action { padding: 4px 8px; font-size: 10px; }
+  .item-meta-row { margin-left: 0; flex-basis: 100%; }
+
+  .colophon { padding: 18px var(--pad-x); margin-top: 32px; }
+  .colophon-block .meta-value { font-size: 10.5px; word-break: break-word; }
+
+  .brief { padding: 20px var(--pad-x) 40px; }
+  .desk + .desk { margin-top: 40px; }
+}
+
+/* Belt-and-suspenders: never let a long URL or unbroken token push
+   horizontal overflow. */
+@media (max-width: 720px) {
+  body { overflow-x: hidden; }
+  .item-title, .item-tldr, .headline-title, .headline-tldr {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
 }