css: shrink the two display headings on phones (<=600px)

.hero-heading was a fixed 1.6rem that never scaled down; .quest-header-title
clamps no smaller than 1.25rem. On phones both dominate the screen — add a
<=600px media query: header title 1.1rem, hero heading 1.2rem.

app.py

@@ -1232,6 +1232,13 @@ footer { display: none !important; }
     grid-template-columns: 1fr !important;
   }
 }
+/* Phone-specific: shrink the two big display headings so they don't dominate
+   the small screen. .hero-heading is otherwise a fixed 1.6rem and never
+   scales down; .quest-header-title's clamp floor (1.25rem) is still large. */
+@media (max-width: 600px) {
+  .quest-header-title { font-size: 1.1rem !important; }
+  .hero-heading { font-size: 1.2rem !important; }
+}
 """