diff --git a/_join-us/index.md b/_join-us/index.md
index fb5ef9b..43dc7c5 100644
--- a/_join-us/index.md
+++ b/_join-us/index.md
@@ -10,7 +10,7 @@ mathematics, or engineering helps, especially in continuum mechanics,
 numerics, and scientific computing.
 
 <div class="email-container">
-  <span class="email-text">vatsal.sanjay@durham.ac.uk</span>
+  <span class="email-text">vatsal.sanjay@<wbr>durham.ac.uk</span>
   <div class="email-actions">
     <a class="email-link" href="mailto:vatsal.sanjay@durham.ac.uk" aria-label="Email vatsal.sanjay@durham.ac.uk">
       <i class="fa-regular fa-envelope"></i>
diff --git a/_teaching/2025-Basilisk101-Madrid.md b/_teaching/2025-Basilisk101-Madrid.md
index 4f101f0..1245175 100644
--- a/_teaching/2025-Basilisk101-Madrid.md
+++ b/_teaching/2025-Basilisk101-Madrid.md
@@ -125,13 +125,13 @@ templates for their own simulations.
 For registration details, please contact
 
 <div class="email-container">
-    <span class="email-text">bubbles@ing.uc3m.es</span>
+    <span class="email-text">bubbles@<wbr>ing.uc3m.es</span>
     <button class="copy-btn" data-text="bubbles@ing.uc3m.es" aria-label="Copy email address bubbles@ing.uc3m.es">
         <i class="fas fa-copy"></i>
     </button>
 </div>
 <div class="email-container">
-    <span class="email-text">vatsal.sanjay@durham.ac.uk</span>
+    <span class="email-text">vatsal.sanjay@<wbr>durham.ac.uk</span>
     <button class="copy-btn" data-text="vatsal.sanjay@durham.ac.uk" aria-label="Copy email address vatsal.sanjay@durham.ac.uk">
         <i class="fas fa-copy"></i>
     </button>
diff --git a/_teaching/2025-Basilisk101nano-ECS.md b/_teaching/2025-Basilisk101nano-ECS.md
index 8d7ffa9..c01bac5 100644
--- a/_teaching/2025-Basilisk101nano-ECS.md
+++ b/_teaching/2025-Basilisk101nano-ECS.md
@@ -132,7 +132,7 @@ Registration for this pre-conference session is handled through [ECS 2025](https
 **Technical Support:**
 
 <div class="email-container">
-  <span class="email-text">vatsal.sanjay@durham.ac.uk</span>
+  <span class="email-text">vatsal.sanjay@<wbr>durham.ac.uk</span>
   <div class="email-actions">
     <a class="email-link" href="mailto:vatsal.sanjay@durham.ac.uk" aria-label="Email vatsal.sanjay@durham.ac.uk">
       <i class="fa-regular fa-envelope"></i>
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 073ffe3..55cad76 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1621,6 +1621,7 @@ h3.news-header {
 
 .email-container {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--s-3);
@@ -1640,12 +1641,17 @@ h3.news-header {
   border-color: var(--c-accent-teal);
 }
 
+/* Keep the address as one unit. Prefer wrapping the action icons
+   below at narrow widths (flex-wrap). Soft break only after @ via
+   <wbr>; never mid-domain (overflow-wrap: anywhere did that). */
 .email-text {
+  flex: 1 0 auto;
+  max-width: 100%;
   min-width: 0;
   font-family: var(--t-mono);
   color: var(--fg-1);
   font-size: 0.95em;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   user-select: all;
 }