fix: shorten sponsorship email buttons and break address only after @

At phone width the two primary buttons labelled with the full address wrapped over three lines, and the address in the Get started sentence broke at its hyphen.

Co-Authored-By: Claude <noreply@anthropic.com>

website/static/style.css

@@ -1409,6 +1409,11 @@ th[data-sort].sort-asc::after {
   color: var(--accent);
 }
 
+/* With the <wbr> after "@", the address breaks only there, never at the domain's hyphen */
+.email-domain {
+  white-space: nowrap;
+}
+
 .sponsorship-lede {
   font-size: var(--text-2xl);
   line-height: 1.45;

website/templates/sponsorship.html

@@ -47,7 +47,7 @@
           href="mailto:sponsorship@awesome-python.com?subject=Awesome%20Python%20Sponsorship"
           data-tier="general"
           class="hero-action hero-action-primary"
-          >Email sponsorship@awesome-python.com</a
+          >Email us</a
         >
         <a
           href="https://github.com/vinta/awesome-python/blob/master/SPONSORSHIP.md"
@@ -233,7 +233,7 @@
         <a
           href="mailto:sponsorship@awesome-python.com?subject=Awesome%20Python%20Sponsorship"
           data-tier="general"
-          >sponsorship@awesome-python.com</a
+          >sponsorship@<wbr /><span class="email-domain">awesome-python.com</span></a
         >
         with the four items below.
       </p>
@@ -273,7 +273,7 @@
           href="mailto:sponsorship@awesome-python.com?subject=Awesome%20Python%20Sponsorship"
           data-tier="general"
           class="hero-action hero-action-primary"
-          >Email sponsorship@awesome-python.com</a
+          >Email us</a
         >
       </div>
     </div>