diff --git a/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap b/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap
index ba46852a119..b27b2f0d485 100644
--- a/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap
@@ -17,6 +17,22 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 .emotion-1 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  transform: translateY(0);
+  will-change: transform;
+}
+
+.emotion-2 {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -24,7 +40,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   z-index: 2147483647;
 }
 
-.emotion-3 {
+.emotion-4 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -32,48 +48,48 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   border-top: solid 0.0625rem transparent;
 }
 
-.emotion-5 {
+.emotion-6 {
   max-width: 37.4375rem;
   margin: 0 auto;
 }
 
-.emotion-5 a {
+.emotion-6 a {
   color: #F6A21D;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: solid 0.0625rem #AEAEB5;
 }
 
-.emotion-5 a:focus,
-.emotion-5 a:hover {
+.emotion-6 a:focus,
+.emotion-6 a:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-5 a:hover,
-.emotion-5 a:focus {
+.emotion-6 a:hover,
+.emotion-6 a:focus {
   border-bottom: solid 0.125rem transparent;
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-5 {
+  .emotion-6 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-5 {
+  .emotion-6 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-5 {
+  .emotion-6 {
     padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem;
   }
 }
 
-.emotion-7 {
+.emotion-8 {
   font-size: 1.125rem;
   line-height: 1.375rem;
   color: #FFFFFF;
@@ -83,24 +99,24 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-7 {
+  .emotion-8 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-8 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
-.emotion-7:focus {
+.emotion-8:focus {
   outline: none;
 }
 
-.emotion-9 {
+.emotion-10 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   margin-top: 1rem;
@@ -109,26 +125,26 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-10 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-9 {
+  .emotion-10 {
     margin-top: 1.5rem;
   }
 }
 
-.emotion-11 {
+.emotion-12 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   display: -webkit-box;
@@ -150,20 +166,20 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-11 {
+  .emotion-12 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-11 {
+  .emotion-12 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-11 li+li {
+.emotion-12 li+li {
   margin-top: 0.5rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -182,7 +198,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-11 {
+  .emotion-12 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -191,18 +207,18 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
     justify-content: space-between;
   }
 
-  .emotion-11 li+li {
+  .emotion-12 li+li {
     margin-top: 0;
   }
 }
 
-.emotion-13 {
+.emotion-14 {
   text-align: center;
   width: 100%;
   word-break: break-word;
 }
 
-.emotion-13 button {
+.emotion-14 button {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   width: 100%;
@@ -216,42 +232,42 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-13 button {
+  .emotion-14 button {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-13 button {
+  .emotion-14 button {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-13 button:focus,
-.emotion-13 button:hover {
+.emotion-14 button:focus,
+.emotion-14 button:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-13 button:hover,
-.emotion-13 button:focus {
+.emotion-14 button:hover,
+.emotion-14 button:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-13 button:focus-visible {
+.emotion-14 button:focus-visible {
   outline: 0.1875rem solid #000000;
 }
 
 @media (min-width: 25rem) {
-  .emotion-13 {
+  .emotion-14 {
     width: 17.3125rem;
   }
 }
 
-.emotion-13.hide {
+.emotion-14.hide {
   width: 2.75rem;
   height: 2.75rem;
   position: absolute;
@@ -261,7 +277,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   padding: 0;
 }
 
-.emotion-13.hide button {
+.emotion-14.hide button {
   width: 2.75rem;
   height: 2.75rem;
   cursor: pointer;
@@ -269,8 +285,8 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   border: none;
 }
 
-.emotion-13.hide button:focus::after,
-.emotion-13.hide button:hover::after {
+.emotion-14.hide button:focus::after,
+.emotion-14.hide button:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -280,7 +296,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   border: 0.1875rem solid #FFFFFF;
 }
 
-.emotion-13.hide button:focus-visible::after {
+.emotion-14.hide button:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -291,7 +307,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   box-shadow: 0 0 0 0.1875rem #FFFFFF inset;
 }
 
-.emotion-13.hide svg {
+.emotion-14.hide svg {
   color: white;
   fill: currentColor;
   position: absolute;
@@ -299,7 +315,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   right: 0;
 }
 
-.emotion-18 {
+.emotion-19 {
   background-color: #B80000;
   height: 2.75rem;
   width: 100%;
@@ -309,36 +325,36 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 15rem) {
-  .emotion-18 {
+  .emotion-19 {
     height: 3.75rem;
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width: 25rem) {
-  .emotion-18 {
+  .emotion-19 {
     height: 3.75rem;
     padding: 0 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-18 {
+  .emotion-19 {
     height: 4rem;
   }
 }
 
-.emotion-18 svg {
+.emotion-19 svg {
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-18 svg {
+  .emotion-19 svg {
     fill: linkText;
   }
 }
 
-.emotion-20 {
+.emotion-21 {
   height: 100%;
   position: relative;
   display: -webkit-box;
@@ -361,12 +377,12 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-20 {
+  .emotion-21 {
     display: block;
   }
 }
 
-.emotion-22 {
+.emotion-23 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -381,15 +397,15 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   padding-top: 0.125rem;
 }
 
-.emotion-22:hover,
-.emotion-22:focus {
+.emotion-23:hover,
+.emotion-23:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
   margin-bottom: -0.25rem;
 }
 
-.emotion-22:focus-visible::after {
+.emotion-23:focus-visible::after {
   content: '';
   position: absolute;
   top: 0;
@@ -400,7 +416,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   outline: 0.25rem solid #FFFFFF;
 }
 
-.emotion-24 {
+.emotion-25 {
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
@@ -408,24 +424,24 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 25rem) {
-  .emotion-24 {
+  .emotion-25 {
     height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-24 {
+  .emotion-25 {
     height: 1.875rem;
   }
 }
 
 @media screen and (-ms-high-contrast: active),print {
-  .emotion-24 {
+  .emotion-25 {
     fill: windowText;
   }
 }
 
-.emotion-26 {
+.emotion-27 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -436,7 +452,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   margin: 0;
 }
 
-.emotion-27 {
+.emotion-28 {
   position: absolute;
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -458,20 +474,20 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-27 {
+  .emotion-28 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-27 {
+  .emotion-28 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-27:focus {
+.emotion-28:focus {
   -webkit-clip-path: none;
   clip-path: none;
   clip: auto;
@@ -482,24 +498,24 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 25rem) {
-  .emotion-27:focus {
+  .emotion-28:focus {
     top: 0.5rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-27 {
+  .emotion-28 {
     padding: 0.5rem;
   }
 }
 
-.emotion-29 {
+.emotion-30 {
   position: relative;
   background-color: #FFFFFF;
 }
 
 @media (min-width: 62.9375rem) {
-  .emotion-29::after {
+  .emotion-30::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -509,11 +525,11 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   }
 }
 
-.emotion-29 .emotion-45::after {
+.emotion-30 .emotion-46::after {
   left: 0;
 }
 
-.emotion-31 {
+.emotion-32 {
   position: relative;
   max-width: 63.4rem;
   margin: 0;
@@ -521,22 +537,22 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-31 {
+  .emotion-32 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-31 {
+  .emotion-32 {
     margin: 0 auto;
   }
 }
 
-.emotion-33 {
+.emotion-34 {
   position: relative;
 }
 
-.emotion-35 {
+.emotion-36 {
   position: relative;
   padding: 0;
   margin: 0;
@@ -547,14 +563,14 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   width: 2.75rem;
 }
 
-.emotion-35:hover,
-.emotion-35:focus {
+.emotion-36:hover,
+.emotion-36:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-35:hover::after,
-.emotion-35:focus::after {
+.emotion-36:hover::after,
+.emotion-36:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -565,36 +581,36 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-35 {
+  .emotion-36 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-35 {
+  .emotion-36 {
     height: 2.75rem;
     width: 2.75rem;
   }
 }
 
-.emotion-35 svg {
+.emotion-36 svg {
   vertical-align: middle;
 }
 
-.emotion-37 {
+.emotion-38 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-37 {
+  .emotion-38 {
     fill: linkText;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-40 {
+  .emotion-41 {
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -603,15 +619,15 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
     -ms-overflow-style: none;
   }
 
-  .emotion-40::-webkit-scrollbar {
+  .emotion-41::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-40:focus-visible {
+  .emotion-41:focus-visible {
     outline: none;
   }
 
-  .emotion-40:focus-visible::after {
+  .emotion-41:focus-visible::after {
     outline: 0.1875rem solid #000000;
     content: '';
     position: absolute;
@@ -619,7 +635,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
     height: 100%;
   }
 
-  .emotion-40:after {
+  .emotion-41:after {
     content: ' ';
     height: 100%;
     width: 3rem;
@@ -637,13 +653,13 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   }
 
   @media (min-width: 25rem) {
-    .emotion-40:after {
+    .emotion-41:after {
       width: 6rem;
     }
   }
 }
 
-.emotion-42 {
+.emotion-43 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -651,12 +667,12 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-42 {
+  .emotion-43 {
     overflow: hidden;
   }
 }
 
-.emotion-44 {
+.emotion-45 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -665,13 +681,13 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-44:last-child {
+  .emotion-45:last-child {
     margin-right: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-44::after {
+  .emotion-45::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -681,7 +697,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   }
 }
 
-.emotion-46 {
+.emotion-47 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -697,26 +713,26 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-46 {
+  .emotion-47 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-46 {
+  .emotion-47 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-46 {
+  .emotion-47 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-46:hover::after {
+.emotion-47:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -725,7 +741,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-46:focus::after {
+.emotion-47:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -736,7 +752,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   border: 0.1875rem solid #000000;
 }
 
-.emotion-46:focus-visible::after {
+.emotion-47:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -747,7 +763,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   border: 0.1875rem solid #000000;
 }
 
-.emotion-88 {
+.emotion-89 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -759,37 +775,37 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-88 {
+  .emotion-89 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-88 {
+  .emotion-89 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-90 {
+.emotion-91 {
   list-style-type: none;
   margin: 0;
   padding: 0 0.5rem;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-92 {
+.emotion-93 {
   padding: 0.75rem 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-92:last-child {
+.emotion-93:last-child {
   padding-bottom: 0.25rem;
   border: 0;
 }
 
-.emotion-94 {
+.emotion-95 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -803,40 +819,40 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-94 {
+  .emotion-95 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-94 {
+  .emotion-95 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-94:hover,
-.emotion-94:focus {
+.emotion-95:hover,
+.emotion-95:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-136 {
+.emotion-137 {
   position: absolute;
   width: calc(100vw - 0.8rem);
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-136 {
+  .emotion-137 {
     width: calc(100vw + 0.8rem);
     inset-inline-start: calc(-1 * (100vw - 1014px) / 2);
   }
 }
 
-.emotion-136::after {
+.emotion-137::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -846,12 +862,12 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 1008px) {
-  .emotion-136 {
+  .emotion-137 {
     display: none;
   }
 }
 
-.emotion-138 {
+.emotion-139 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -859,36 +875,36 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   position: relative;
 }
 
-.emotion-139 {
+.emotion-140 {
   content-visibility: auto;
   contain-intrinsic-size: 33.125rem;
 }
 
 @media (min-width: 15rem) {
-  .emotion-139 {
+  .emotion-140 {
     contain-intrinsic-size: 26.563rem;
   }
 }
 
 @media (min-width: 20) {
-  .emotion-139 {
+  .emotion-140 {
     contain-intrinsic-size: 23.438rem;
   }
 }
 
 @media (min-width: 25rem) {
-  .emotion-139 {
+  .emotion-140 {
     contain-intrinsic-size: 21.875rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-139 {
+  .emotion-140 {
     contain-intrinsic-size: 17.188rem;
   }
 }
 
-.emotion-142 {
+.emotion-143 {
   background-color: #B80000;
   height: 2.75rem;
   width: 100%;
@@ -899,36 +915,36 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 15rem) {
-  .emotion-142 {
+  .emotion-143 {
     height: 3.75rem;
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width: 25rem) {
-  .emotion-142 {
+  .emotion-143 {
     height: 3.75rem;
     padding: 0 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-142 {
+  .emotion-143 {
     height: 4rem;
   }
 }
 
-.emotion-142 svg {
+.emotion-143 svg {
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-142 svg {
+  .emotion-143 svg {
     fill: linkText;
   }
 }
 
-.emotion-151 {
+.emotion-152 {
   font-size: 0.875rem;
   line-height: 1.125rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -939,32 +955,32 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-151 {
+  .emotion-152 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-151 {
+  .emotion-152 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-151 {
+  .emotion-152 {
     padding: 0 0.5rem;
   }
 }
 
-.emotion-152 {
+.emotion-153 {
   max-width: 63rem;
   margin: 0 auto;
   padding-top: 0.5rem;
 }
 
-.emotion-153 {
+.emotion-154 {
   border-bottom: 0.0625rem solid #3F3F42;
   -webkit-column-count: 4;
   column-count: 4;
@@ -974,14 +990,14 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-153 {
+  .emotion-154 {
     display: grid;
     grid-auto-flow: column;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-auto-flow: row;
     -webkit-column-count: 1;
     column-count: 1;
@@ -989,7 +1005,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 15rem) and (max-width: 37.4375rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-column-gap: 0.5rem;
     grid-template-columns: repeat(2, 1fr);
     -webkit-column-count: 2;
@@ -998,7 +1014,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-column-gap: 1rem;
     grid-template-columns: repeat(3, 1fr);
     -webkit-column-count: 3;
@@ -1007,7 +1023,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-column-gap: 1rem;
     grid-template-columns: repeat(4, 1fr);
     -webkit-column-count: 4;
@@ -1016,7 +1032,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 80rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-column-gap: 1rem;
     grid-template-columns: repeat(5, 1fr);
     -webkit-column-count: 5;
@@ -1024,7 +1040,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   }
 }
 
-.emotion-153>li:first-of-type {
+.emotion-154>li:first-of-type {
   border-bottom: 0.0625rem solid #3F3F42;
   padding: 0.5rem 0;
   margin-bottom: 0.5rem;
@@ -1035,37 +1051,37 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 }
 
 @media (min-width: 15rem) and (max-width: 37.4375rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-template-rows: repeat(4, auto);
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-template-rows: repeat(3, auto);
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-template-rows: repeat(3, auto);
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-153 {
+  .emotion-154 {
     grid-template-rows: repeat(3, auto);
   }
 }
 
-.emotion-154 {
+.emotion-155 {
   min-width: 50%;
   -webkit-column-gap: 1rem;
   column-gap: 1rem;
   break-inside: avoid-column;
 }
 
-.emotion-155 {
+.emotion-156 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 700;
@@ -1076,23 +1092,23 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   display: block;
 }
 
-.emotion-155:hover,
-.emotion-155:focus {
+.emotion-156:hover,
+.emotion-156:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-162 {
+.emotion-163 {
   color: #FFFFFF;
   margin: 0;
   padding: 1rem 0;
 }
 
-.emotion-162 a {
+.emotion-163 a {
   padding: 0;
 }
 
-.emotion-163 {
+.emotion-164 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 700;
@@ -1103,8 +1119,8 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   display: inline;
 }
 
-.emotion-163:hover,
-.emotion-163:focus {
+.emotion-164:hover,
+.emotion-164:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -1114,523 +1130,528 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
     class="emotion-0"
     id="main-wrapper"
   >
-    <header
-      role="banner"
+    <div
+      aria-live="polite"
+      class="emotion-1"
     >
-      <div>
-        <div
-          class="emotion-1 emotion-2"
-        >
+      <header
+        role="banner"
+      >
+        <div>
           <div
-            class="emotion-3 emotion-4"
-            dir="ltr"
+            class="emotion-2 emotion-3"
           >
             <div
-              class="emotion-5 emotion-6"
+              class="emotion-4 emotion-5"
               dir="ltr"
             >
-              <h2
-                class="emotion-7 emotion-8"
+              <div
+                class="emotion-6 emotion-7"
                 dir="ltr"
-                tabindex="-1"
               >
-                Let us know you agree to cookies
-              </h2>
-              <p
-                class="emotion-9 emotion-10"
-                dir="ltr"
-              >
-                We use 
-                <a
-                  class="focusIndicatorReducedWidth"
-                  href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
+                <h2
+                  class="emotion-8 emotion-9"
+                  dir="ltr"
+                  tabindex="-1"
                 >
-                  cookies
-                </a>
-                 to give you the best online experience. Please let us know if you agree to all of these cookies.
-              </p>
-              <ul
-                class="emotion-11 emotion-12"
-                dir="ltr"
-                role="list"
-              >
-                <li
-                  class="emotion-13 emotion-14"
+                  Let us know you agree to cookies
+                </h2>
+                <p
+                  class="emotion-10 emotion-11"
                   dir="ltr"
                 >
-                  <button
-                    data-cookie-banner="accept"
-                    type="button"
+                  We use 
+                  <a
+                    class="focusIndicatorReducedWidth"
+                    href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
                   >
-                    Yes, I agree
-                  </button>
-                </li>
-                <li
-                  class="emotion-13 emotion-14"
+                    cookies
+                  </a>
+                   to give you the best online experience. Please let us know if you agree to all of these cookies.
+                </p>
+                <ul
+                  class="emotion-12 emotion-13"
                   dir="ltr"
+                  role="list"
                 >
-                  <span>
-                    <a
-                      data-cookie-banner="reject"
-                      href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+                  <li
+                    class="emotion-14 emotion-15"
+                    dir="ltr"
+                  >
+                    <button
+                      data-cookie-banner="accept"
+                      type="button"
                     >
-                      No, take me to settings
-                    </a>
-                  </span>
-                </li>
-              </ul>
+                      Yes, I agree
+                    </button>
+                  </li>
+                  <li
+                    class="emotion-14 emotion-15"
+                    dir="ltr"
+                  >
+                    <span>
+                      <a
+                        data-cookie-banner="reject"
+                        href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+                      >
+                        No, take me to settings
+                      </a>
+                    </span>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="emotion-17 emotion-18 emotion-19"
-        >
           <div
-            class="emotion-20 emotion-21"
+            class="emotion-18 emotion-19 emotion-20"
           >
-            <a
-              aria-labelledby="BrandLink-topPage"
-              class="focusIndicatorRemove emotion-22 emotion-23"
-              href="/news"
-              id="topPage"
+            <div
+              class="emotion-21 emotion-22"
             >
-              <svg
-                aria-hidden="true"
-                class="emotion-24 emotion-25"
-                focusable="false"
-                height="32"
-                id="brandSvgHeader"
-                viewBox="0 0 980 142"
-                xmlns="http://www.w3.org/2000/svg"
+              <a
+                aria-labelledby="BrandLink-topPage"
+                class="focusIndicatorRemove emotion-23 emotion-24"
+                href="/news"
+                id="topPage"
               >
-                <g
-                  fill-rule="evenodd"
-                  stroke="#000"
-                  stroke-width=".335"
-                  style="stroke: #fff;"
+                <svg
+                  aria-hidden="true"
+                  class="emotion-25 emotion-26"
+                  focusable="false"
+                  height="32"
+                  id="brandSvgHeader"
+                  viewBox="0 0 980 142"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
-                  />
-                </g>
-              </svg>
-              <span
-                class="emotion-26"
-                id="BrandLink-topPage"
+                  <g
+                    fill-rule="evenodd"
+                    stroke="#000"
+                    stroke-width=".335"
+                    style="stroke: #fff;"
+                  >
+                    <path
+                      d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
+                    />
+                  </g>
+                </svg>
+                <span
+                  class="emotion-27"
+                  id="BrandLink-topPage"
+                >
+                  BBC News
+                </span>
+              </a>
+              <a
+                class="focusIndicatorRemove emotion-28 emotion-29"
+                dir="ltr"
+                href="#content"
               >
-                BBC News
-              </span>
-            </a>
-            <a
-              class="focusIndicatorRemove emotion-27 emotion-28"
-              dir="ltr"
-              href="#content"
-            >
-              <div>
-                Skip to content
-              </div>
-            </a>
+                <div>
+                  Skip to content
+                </div>
+              </a>
+            </div>
           </div>
         </div>
-      </div>
-      <nav
-        class="emotion-29 emotion-30"
-        dir="ltr"
-        role="navigation"
-      >
-        <div
-          class="emotion-31 emotion-32"
+        <nav
+          class="emotion-30 emotion-31"
+          dir="ltr"
+          role="navigation"
         >
           <div
-            class="emotion-33 emotion-34"
+            class="emotion-32 emotion-33"
           >
-            <button
-              aria-expanded="false"
-              class="focusIndicatorRemove emotion-35 emotion-36"
-              dir="ltr"
-              type="button"
+            <div
+              class="emotion-34 emotion-35"
             >
-              <svg
-                aria-hidden="true"
-                class="emotion-37 emotion-38"
-                focusable="false"
-                height="2.75rem"
-                viewBox="0 0 44 44"
-                width="2.75rem"
+              <button
+                aria-expanded="false"
+                class="focusIndicatorRemove emotion-36 emotion-37"
+                dir="ltr"
+                type="button"
               >
-                <path
-                  d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
-                />
-              </svg>
-              <span
-                class="emotion-26"
+                <svg
+                  aria-hidden="true"
+                  class="emotion-38 emotion-39"
+                  focusable="false"
+                  height="2.75rem"
+                  viewBox="0 0 44 44"
+                  width="2.75rem"
+                >
+                  <path
+                    d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
+                  />
+                </svg>
+                <span
+                  class="emotion-27"
+                >
+                  Sections
+                </span>
+              </button>
+              <div
+                class="emotion-41 emotion-42"
+                data-e2e="scrollable-nav"
+                dir="ltr"
               >
-                Sections
-              </span>
-            </button>
+                <ul
+                  class="emotion-43 emotion-44"
+                  role="list"
+                >
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news"
+                    >
+                      Home
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/uk"
+                    >
+                      UK
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/world"
+                    >
+                      World
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/business"
+                    >
+                      Business
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/politics"
+                    >
+                      Politics
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/technology"
+                    >
+                      Tech
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/science_and_environment"
+                    >
+                      Science
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/health"
+                    >
+                      Health
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/education"
+                    >
+                      Family & Education
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/entertainment_and_arts"
+                    >
+                      Entertainment & Arts
+                    </a>
+                  </li>
+                  <li
+                    class="emotion-45 emotion-46"
+                    dir="ltr"
+                    role="listitem"
+                  >
+                    <a
+                      class="focusIndicatorRemove emotion-47 emotion-48"
+                      href="/news/stories"
+                    >
+                      Stories
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
             <div
-              class="emotion-40 emotion-41"
-              data-e2e="scrollable-nav"
-              dir="ltr"
+              class="emotion-89 emotion-90"
+              data-e2e="dropdown-nav"
+              height="0"
             >
               <ul
-                class="emotion-42 emotion-43"
+                class="emotion-91 emotion-92"
                 role="list"
               >
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-home"
+                    class="emotion-95 emotion-96"
                     href="/news"
                   >
-                    Home
+                    <span
+                      id="dropdownNavigation-home"
+                    >
+                      Home
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-uk"
+                    class="emotion-95 emotion-96"
                     href="/news/uk"
                   >
-                    UK
+                    <span
+                      id="dropdownNavigation-uk"
+                    >
+                      UK
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-world"
+                    class="emotion-95 emotion-96"
                     href="/news/world"
                   >
-                    World
+                    <span
+                      id="dropdownNavigation-world"
+                    >
+                      World
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-business"
+                    class="emotion-95 emotion-96"
                     href="/news/business"
                   >
-                    Business
+                    <span
+                      id="dropdownNavigation-business"
+                    >
+                      Business
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-politics"
+                    class="emotion-95 emotion-96"
                     href="/news/politics"
                   >
-                    Politics
+                    <span
+                      id="dropdownNavigation-politics"
+                    >
+                      Politics
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-tech"
+                    class="emotion-95 emotion-96"
                     href="/news/technology"
                   >
-                    Tech
+                    <span
+                      id="dropdownNavigation-tech"
+                    >
+                      Tech
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-science"
+                    class="emotion-95 emotion-96"
                     href="/news/science_and_environment"
                   >
-                    Science
+                    <span
+                      id="dropdownNavigation-science"
+                    >
+                      Science
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-health"
+                    class="emotion-95 emotion-96"
                     href="/news/health"
                   >
-                    Health
+                    <span
+                      id="dropdownNavigation-health"
+                    >
+                      Health
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-family-&-education"
+                    class="emotion-95 emotion-96"
                     href="/news/education"
                   >
-                    Family & Education
+                    <span
+                      id="dropdownNavigation-family-&-education"
+                    >
+                      Family & Education
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-entertainment-&-arts"
+                    class="emotion-95 emotion-96"
                     href="/news/entertainment_and_arts"
                   >
-                    Entertainment & Arts
+                    <span
+                      id="dropdownNavigation-entertainment-&-arts"
+                    >
+                      Entertainment & Arts
+                    </span>
                   </a>
                 </li>
                 <li
-                  class="emotion-44 emotion-45"
-                  dir="ltr"
+                  class="emotion-93 emotion-94"
                   role="listitem"
                 >
                   <a
-                    class="focusIndicatorRemove emotion-46 emotion-47"
+                    aria-labelledby="dropdownNavigation-stories"
+                    class="emotion-95 emotion-96"
                     href="/news/stories"
                   >
-                    Stories
+                    <span
+                      id="dropdownNavigation-stories"
+                    >
+                      Stories
+                    </span>
                   </a>
                 </li>
               </ul>
             </div>
+            <div
+              class="emotion-137 emotion-138"
+            />
           </div>
-          <div
-            class="emotion-88 emotion-89"
-            data-e2e="dropdown-nav"
-            height="0"
-          >
-            <ul
-              class="emotion-90 emotion-91"
-              role="list"
-            >
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-home"
-                  class="emotion-94 emotion-95"
-                  href="/news"
-                >
-                  <span
-                    id="dropdownNavigation-home"
-                  >
-                    Home
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-uk"
-                  class="emotion-94 emotion-95"
-                  href="/news/uk"
-                >
-                  <span
-                    id="dropdownNavigation-uk"
-                  >
-                    UK
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-world"
-                  class="emotion-94 emotion-95"
-                  href="/news/world"
-                >
-                  <span
-                    id="dropdownNavigation-world"
-                  >
-                    World
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-business"
-                  class="emotion-94 emotion-95"
-                  href="/news/business"
-                >
-                  <span
-                    id="dropdownNavigation-business"
-                  >
-                    Business
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-politics"
-                  class="emotion-94 emotion-95"
-                  href="/news/politics"
-                >
-                  <span
-                    id="dropdownNavigation-politics"
-                  >
-                    Politics
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-tech"
-                  class="emotion-94 emotion-95"
-                  href="/news/technology"
-                >
-                  <span
-                    id="dropdownNavigation-tech"
-                  >
-                    Tech
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-science"
-                  class="emotion-94 emotion-95"
-                  href="/news/science_and_environment"
-                >
-                  <span
-                    id="dropdownNavigation-science"
-                  >
-                    Science
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-health"
-                  class="emotion-94 emotion-95"
-                  href="/news/health"
-                >
-                  <span
-                    id="dropdownNavigation-health"
-                  >
-                    Health
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-family-&-education"
-                  class="emotion-94 emotion-95"
-                  href="/news/education"
-                >
-                  <span
-                    id="dropdownNavigation-family-&-education"
-                  >
-                    Family & Education
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-entertainment-&-arts"
-                  class="emotion-94 emotion-95"
-                  href="/news/entertainment_and_arts"
-                >
-                  <span
-                    id="dropdownNavigation-entertainment-&-arts"
-                  >
-                    Entertainment & Arts
-                  </span>
-                </a>
-              </li>
-              <li
-                class="emotion-92 emotion-93"
-                role="listitem"
-              >
-                <a
-                  aria-labelledby="dropdownNavigation-stories"
-                  class="emotion-94 emotion-95"
-                  href="/news/stories"
-                >
-                  <span
-                    id="dropdownNavigation-stories"
-                  >
-                    Stories
-                  </span>
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div
-            class="emotion-136 emotion-137"
-          />
-        </div>
-      </nav>
-    </header>
+        </nav>
+      </header>
+    </div>
     <div
-      class="emotion-138"
+      class="emotion-139"
     >
       <h2>
         Child element
       </h2>
     </div>
     <footer
-      class="emotion-139 emotion-140"
+      class="emotion-140 emotion-141"
       role="contentinfo"
     >
       <div
-        class="emotion-17 emotion-142 emotion-19"
+        class="emotion-18 emotion-143 emotion-20"
       >
         <div
-          class="emotion-20 emotion-21"
+          class="emotion-21 emotion-22"
         >
           <a
             aria-labelledby="BrandLink-footer"
-            class="focusIndicatorRemove emotion-22 emotion-23"
+            class="focusIndicatorRemove emotion-23 emotion-24"
             href="/news"
             id="footer"
           >
             <svg
               aria-hidden="true"
-              class="emotion-24 emotion-25"
+              class="emotion-25 emotion-26"
               focusable="false"
               height="32"
               id="brandSvgFooter"
@@ -1649,7 +1670,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
               </g>
             </svg>
             <span
-              class="emotion-26"
+              class="emotion-27"
               id="BrandLink-footer"
             >
               BBC News
@@ -1658,20 +1679,20 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
         </div>
       </div>
       <div
-        class="emotion-151"
+        class="emotion-152"
       >
         <div
-          class="emotion-152"
+          class="emotion-153"
         >
           <ul
-            class="emotion-153"
+            class="emotion-154"
             role="list"
           >
             <li
-              class="emotion-154"
+              class="emotion-155"
             >
               <a
-                class="focusIndicatorInvert emotion-155"
+                class="focusIndicatorInvert emotion-156"
                 href="https://www.bbc.com/news/help-41670342"
               >
                 Why you can trust the BBC
@@ -1679,7 +1700,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
             </li>
             <li>
               <a
-                class="focusIndicatorInvert emotion-155"
+                class="focusIndicatorInvert emotion-156"
                 href="https://www.bbc.com/terms"
               >
                 Terms of Use
@@ -1687,7 +1708,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
             </li>
             <li>
               <a
-                class="focusIndicatorInvert emotion-155"
+                class="focusIndicatorInvert emotion-156"
                 href="https://www.bbc.co.uk/aboutthebbc/"
               >
                 About the BBC
@@ -1695,7 +1716,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
             </li>
             <li>
               <a
-                class="focusIndicatorInvert emotion-155"
+                class="focusIndicatorInvert emotion-156"
                 href="https://www.bbc.com/privacy/"
               >
                 Privacy Policy
@@ -1703,7 +1724,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
             </li>
             <li>
               <a
-                class="focusIndicatorInvert emotion-155"
+                class="focusIndicatorInvert emotion-156"
                 href="https://www.bbc.com/usingthebbc/cookies/"
               >
                 Cookies
@@ -1711,7 +1732,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
             </li>
             <li>
               <a
-                class="focusIndicatorInvert emotion-155"
+                class="focusIndicatorInvert emotion-156"
                 href="https://www.bbc.com/accessibility/"
               >
                 Accessibility Help
@@ -1719,7 +1740,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
             </li>
             <li>
               <a
-                class="focusIndicatorInvert emotion-155"
+                class="focusIndicatorInvert emotion-156"
                 href="https://www.bbc.com/contact/"
               >
                 Contact the BBC
@@ -1727,7 +1748,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
             </li>
           </ul>
           <p
-            class="emotion-162"
+            class="emotion-163"
           >
             <span
               lang="en-GB"
@@ -1738,7 +1759,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
             2026 BBC. The BBC is not responsible for the content of external sites.
              
             <a
-              class="focusIndicatorInvert emotion-163"
+              class="focusIndicatorInvert emotion-164"
               href="https://www.bbc.co.uk/editorialguidelines/guidance/feeds-and-links"
             >
               Read about our approach to external linking.
diff --git a/src/app/legacy/containers/Header/StickyishNav.jsx b/src/app/legacy/containers/Header/StickyishNav.jsx
new file mode 100644
index 00000000000..c63ed706481
--- /dev/null
+++ b/src/app/legacy/containers/Header/StickyishNav.jsx
@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'react';
+
+const headerWrapperStyles = isVisible => ({
+  position: 'sticky',
+  top: 0,
+  left: 0,
+  width: '100%',
+  zIndex: 10000,
+  transition: 'transform 0.3s ease',
+  transform: isVisible ? 'translateY(0)' : 'translateY(-100%)',
+  willChange: 'transform',
+});
+
+const StickyishNav = ({ children }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const lastScrollY = useRef(0);
+
+  useEffect(() => {
+    lastScrollY.current = window.scrollY;
+
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      const isScrollingUp = currentScrollY < lastScrollY.current;
+      const isNearTop = currentScrollY < 10;
+
+      setIsVisible(isScrollingUp || isNearTop);
+      lastScrollY.current = currentScrollY;
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div css={headerWrapperStyles(isVisible)} aria-live="polite">
+      {children}
+    </div>
+  );
+};
+
+export default StickyishNav;
diff --git a/src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap
index d9946c1227b..069ee714ea0 100644
--- a/src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap
@@ -2,6 +2,22 @@
 
 exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 .emotion-0 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  transform: translateY(0);
+  will-change: transform;
+}
+
+.emotion-1 {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -9,7 +25,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   z-index: 2147483647;
 }
 
-.emotion-2 {
+.emotion-3 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -17,48 +33,48 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   border-top: solid 0.0625rem transparent;
 }
 
-.emotion-4 {
+.emotion-5 {
   max-width: 37.4375rem;
   margin: 0 auto;
 }
 
-.emotion-4 a {
+.emotion-5 a {
   color: #F6A21D;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: solid 0.0625rem #AEAEB5;
 }
 
-.emotion-4 a:focus,
-.emotion-4 a:hover {
+.emotion-5 a:focus,
+.emotion-5 a:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-4 a:hover,
-.emotion-4 a:focus {
+.emotion-5 a:hover,
+.emotion-5 a:focus {
   border-bottom: solid 0.125rem transparent;
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem;
   }
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 1.125rem;
   line-height: 1.375rem;
   color: #FFFFFF;
@@ -68,24 +84,24 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-6 {
+  .emotion-7 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-7 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
-.emotion-6:focus {
+.emotion-7:focus {
   outline: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   margin-top: 1rem;
@@ -94,26 +110,26 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-9 {
     margin-top: 1.5rem;
   }
 }
 
-.emotion-10 {
+.emotion-11 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   display: -webkit-box;
@@ -135,20 +151,20 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-10 li+li {
+.emotion-11 li+li {
   margin-top: 0.5rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -167,7 +183,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -176,18 +192,18 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
     justify-content: space-between;
   }
 
-  .emotion-10 li+li {
+  .emotion-11 li+li {
     margin-top: 0;
   }
 }
 
-.emotion-12 {
+.emotion-13 {
   text-align: center;
   width: 100%;
   word-break: break-word;
 }
 
-.emotion-12 button {
+.emotion-13 button {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   width: 100%;
@@ -201,42 +217,42 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-12 button {
+  .emotion-13 button {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12 button {
+  .emotion-13 button {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-12 button:focus,
-.emotion-12 button:hover {
+.emotion-13 button:focus,
+.emotion-13 button:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-12 button:hover,
-.emotion-12 button:focus {
+.emotion-13 button:hover,
+.emotion-13 button:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-12 button:focus-visible {
+.emotion-13 button:focus-visible {
   outline: 0.1875rem solid #000000;
 }
 
 @media (min-width: 25rem) {
-  .emotion-12 {
+  .emotion-13 {
     width: 17.3125rem;
   }
 }
 
-.emotion-12.hide {
+.emotion-13.hide {
   width: 2.75rem;
   height: 2.75rem;
   position: absolute;
@@ -246,7 +262,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   padding: 0;
 }
 
-.emotion-12.hide button {
+.emotion-13.hide button {
   width: 2.75rem;
   height: 2.75rem;
   cursor: pointer;
@@ -254,8 +270,8 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   border: none;
 }
 
-.emotion-12.hide button:focus::after,
-.emotion-12.hide button:hover::after {
+.emotion-13.hide button:focus::after,
+.emotion-13.hide button:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -265,7 +281,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   border: 0.1875rem solid #FFFFFF;
 }
 
-.emotion-12.hide button:focus-visible::after {
+.emotion-13.hide button:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -276,7 +292,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   box-shadow: 0 0 0 0.1875rem #FFFFFF inset;
 }
 
-.emotion-12.hide svg {
+.emotion-13.hide svg {
   color: white;
   fill: currentColor;
   position: absolute;
@@ -284,7 +300,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   right: 0;
 }
 
-.emotion-17 {
+.emotion-18 {
   background-color: #B80000;
   height: 2.75rem;
   width: 100%;
@@ -294,36 +310,36 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 15rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 3.75rem;
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width: 25rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 3.75rem;
     padding: 0 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 4rem;
   }
 }
 
-.emotion-17 svg {
+.emotion-18 svg {
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-17 svg {
+  .emotion-18 svg {
     fill: linkText;
   }
 }
 
-.emotion-19 {
+.emotion-20 {
   height: 100%;
   position: relative;
   display: -webkit-box;
@@ -346,12 +362,12 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-19 {
+  .emotion-20 {
     display: block;
   }
 }
 
-.emotion-21 {
+.emotion-22 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -366,15 +382,15 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   padding-top: 0.125rem;
 }
 
-.emotion-21:hover,
-.emotion-21:focus {
+.emotion-22:hover,
+.emotion-22:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
   margin-bottom: -0.25rem;
 }
 
-.emotion-21:focus-visible::after {
+.emotion-22:focus-visible::after {
   content: '';
   position: absolute;
   top: 0;
@@ -385,7 +401,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   outline: 0.25rem solid #FFFFFF;
 }
 
-.emotion-23 {
+.emotion-24 {
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
@@ -393,24 +409,24 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-23 {
+  .emotion-24 {
     height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-24 {
     height: 1.875rem;
   }
 }
 
 @media screen and (-ms-high-contrast: active),print {
-  .emotion-23 {
+  .emotion-24 {
     fill: windowText;
   }
 }
 
-.emotion-25 {
+.emotion-26 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -421,7 +437,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   margin: 0;
 }
 
-.emotion-26 {
+.emotion-27 {
   position: absolute;
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -443,20 +459,20 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-26 {
+  .emotion-27 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-26 {
+  .emotion-27 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-26:focus {
+.emotion-27:focus {
   -webkit-clip-path: none;
   clip-path: none;
   clip: auto;
@@ -467,24 +483,24 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-26:focus {
+  .emotion-27:focus {
     top: 0.5rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-26 {
+  .emotion-27 {
     padding: 0.5rem;
   }
 }
 
-.emotion-28 {
+.emotion-29 {
   position: relative;
   background-color: #FFFFFF;
 }
 
 @media (min-width: 62.9375rem) {
-  .emotion-28::after {
+  .emotion-29::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -494,11 +510,11 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   }
 }
 
-.emotion-28 .emotion-44::after {
+.emotion-29 .emotion-45::after {
   left: 0;
 }
 
-.emotion-30 {
+.emotion-31 {
   position: relative;
   max-width: 63.4rem;
   margin: 0;
@@ -506,22 +522,22 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-30 {
+  .emotion-31 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-30 {
+  .emotion-31 {
     margin: 0 auto;
   }
 }
 
-.emotion-32 {
+.emotion-33 {
   position: relative;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: relative;
   padding: 0;
   margin: 0;
@@ -532,14 +548,14 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   width: 2.75rem;
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-35:hover,
+.emotion-35:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-34:hover::after,
-.emotion-34:focus::after {
+.emotion-35:hover::after,
+.emotion-35:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -550,36 +566,36 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-34 {
+  .emotion-35 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-34 {
+  .emotion-35 {
     height: 2.75rem;
     width: 2.75rem;
   }
 }
 
-.emotion-34 svg {
+.emotion-35 svg {
   vertical-align: middle;
 }
 
-.emotion-36 {
+.emotion-37 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-36 {
+  .emotion-37 {
     fill: linkText;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-39 {
+  .emotion-40 {
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -588,15 +604,15 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-39::-webkit-scrollbar {
+  .emotion-40::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-39:focus-visible {
+  .emotion-40:focus-visible {
     outline: none;
   }
 
-  .emotion-39:focus-visible::after {
+  .emotion-40:focus-visible::after {
     outline: 0.1875rem solid #000000;
     content: '';
     position: absolute;
@@ -604,7 +620,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
     height: 100%;
   }
 
-  .emotion-39:after {
+  .emotion-40:after {
     content: ' ';
     height: 100%;
     width: 3rem;
@@ -622,13 +638,13 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   }
 
   @media (min-width: 25rem) {
-    .emotion-39:after {
+    .emotion-40:after {
       width: 6rem;
     }
   }
 }
 
-.emotion-41 {
+.emotion-42 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -636,12 +652,12 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-41 {
+  .emotion-42 {
     overflow: hidden;
   }
 }
 
-.emotion-43 {
+.emotion-44 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -650,13 +666,13 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-43:last-child {
+  .emotion-44:last-child {
     margin-right: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-43::after {
+  .emotion-44::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -666,7 +682,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   }
 }
 
-.emotion-45 {
+.emotion-46 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -682,26 +698,26 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-45 {
+  .emotion-46 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-45 {
+  .emotion-46 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-45 {
+  .emotion-46 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-45:hover::after {
+.emotion-46:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -710,7 +726,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-45:focus::after {
+.emotion-46:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -721,7 +737,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   border: 0.1875rem solid #000000;
 }
 
-.emotion-45:focus-visible::after {
+.emotion-46:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -732,7 +748,7 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
   border: 0.1875rem solid #000000;
 }
 
-.emotion-87 {
+.emotion-88 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -744,37 +760,37 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-87 {
+  .emotion-88 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-87 {
+  .emotion-88 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-89 {
+.emotion-90 {
   list-style-type: none;
   margin: 0;
   padding: 0 0.5rem;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-91 {
+.emotion-92 {
   padding: 0.75rem 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-91:last-child {
+.emotion-92:last-child {
   padding-bottom: 0.25rem;
   border: 0;
 }
 
-.emotion-93 {
+.emotion-94 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -788,40 +804,40 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-93 {
+  .emotion-94 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-93 {
+  .emotion-94 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-93:hover,
-.emotion-93:focus {
+.emotion-94:hover,
+.emotion-94:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-135 {
+.emotion-136 {
   position: absolute;
   width: calc(100vw - 0.8rem);
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-135 {
+  .emotion-136 {
     width: calc(100vw + 0.8rem);
     inset-inline-start: calc(-1 * (100vw - 1014px) / 2);
   }
 }
 
-.emotion-135::after {
+.emotion-136::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -831,506 +847,527 @@ exports[`Header Snapshots should render correctly for WS TV page 1`] = `
 }
 
 @media (min-width: 1008px) {
-  .emotion-135 {
+  .emotion-136 {
     display: none;
   }
 }
 
-<header
-  role="banner"
+<div
+  aria-live="polite"
+  class="emotion-0"
 >
-  <div>
-    <div
-      class="emotion-0 emotion-1"
-    >
+  <header
+    role="banner"
+  >
+    <div>
       <div
-        class="emotion-2 emotion-3"
-        dir="ltr"
+        class="emotion-1 emotion-2"
       >
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-3 emotion-4"
           dir="ltr"
         >
-          <h2
-            class="emotion-6 emotion-7"
-            dir="ltr"
-            tabindex="-1"
-          >
-            Let us know you agree to cookies
-          </h2>
-          <p
-            class="emotion-8 emotion-9"
+          <div
+            class="emotion-5 emotion-6"
             dir="ltr"
           >
-            We use 
-            <a
-              class="focusIndicatorReducedWidth"
-              href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
+            <h2
+              class="emotion-7 emotion-8"
+              dir="ltr"
+              tabindex="-1"
             >
-              cookies
-            </a>
-             to give you the best online experience. Please let us know if you agree to all of these cookies.
-          </p>
-          <ul
-            class="emotion-10 emotion-11"
-            dir="ltr"
-            role="list"
-          >
-            <li
-              class="emotion-12 emotion-13"
+              Let us know you agree to cookies
+            </h2>
+            <p
+              class="emotion-9 emotion-10"
               dir="ltr"
             >
-              <button
-                data-cookie-banner="accept"
-                type="button"
+              We use 
+              <a
+                class="focusIndicatorReducedWidth"
+                href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
               >
-                Yes, I agree
-              </button>
-            </li>
-            <li
-              class="emotion-12 emotion-13"
+                cookies
+              </a>
+               to give you the best online experience. Please let us know if you agree to all of these cookies.
+            </p>
+            <ul
+              class="emotion-11 emotion-12"
               dir="ltr"
+              role="list"
             >
-              <span>
-                <a
-                  data-cookie-banner="reject"
-                  href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+              <li
+                class="emotion-13 emotion-14"
+                dir="ltr"
+              >
+                <button
+                  data-cookie-banner="accept"
+                  type="button"
                 >
-                  No, take me to settings
-                </a>
-              </span>
-            </li>
-          </ul>
+                  Yes, I agree
+                </button>
+              </li>
+              <li
+                class="emotion-13 emotion-14"
+                dir="ltr"
+              >
+                <span>
+                  <a
+                    data-cookie-banner="reject"
+                    href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+                  >
+                    No, take me to settings
+                  </a>
+                </span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="emotion-16 emotion-17 emotion-18"
-    >
       <div
-        class="emotion-19 emotion-20"
+        class="emotion-17 emotion-18 emotion-19"
       >
-        <a
-          aria-labelledby="BrandLink-topPage"
-          class="focusIndicatorRemove emotion-21 emotion-22"
-          href="/news"
-          id="topPage"
+        <div
+          class="emotion-20 emotion-21"
         >
-          <svg
-            aria-hidden="true"
-            class="emotion-23 emotion-24"
-            focusable="false"
-            height="32"
-            id="brandSvgHeader"
-            viewBox="0 0 980 142"
-            xmlns="http://www.w3.org/2000/svg"
+          <a
+            aria-labelledby="BrandLink-topPage"
+            class="focusIndicatorRemove emotion-22 emotion-23"
+            href="/news"
+            id="topPage"
           >
-            <g
-              fill-rule="evenodd"
-              stroke="#000"
-              stroke-width=".335"
-              style="stroke: #fff;"
+            <svg
+              aria-hidden="true"
+              class="emotion-24 emotion-25"
+              focusable="false"
+              height="32"
+              id="brandSvgHeader"
+              viewBox="0 0 980 142"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
-              />
-            </g>
-          </svg>
-          <span
-            class="emotion-25"
-            id="BrandLink-topPage"
+              <g
+                fill-rule="evenodd"
+                stroke="#000"
+                stroke-width=".335"
+                style="stroke: #fff;"
+              >
+                <path
+                  d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
+                />
+              </g>
+            </svg>
+            <span
+              class="emotion-26"
+              id="BrandLink-topPage"
+            >
+              BBC News
+            </span>
+          </a>
+          <a
+            class="focusIndicatorRemove emotion-27 emotion-28"
+            dir="ltr"
+            href="#content"
           >
-            BBC News
-          </span>
-        </a>
-        <a
-          class="focusIndicatorRemove emotion-26 emotion-27"
-          dir="ltr"
-          href="#content"
-        >
-          <div>
-            Skip to content
-          </div>
-        </a>
+            <div>
+              Skip to content
+            </div>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
-  <nav
-    class="emotion-28 emotion-29"
-    dir="ltr"
-    role="navigation"
-  >
-    <div
-      class="emotion-30 emotion-31"
+    <nav
+      class="emotion-29 emotion-30"
+      dir="ltr"
+      role="navigation"
     >
       <div
-        class="emotion-32 emotion-33"
+        class="emotion-31 emotion-32"
       >
-        <button
-          aria-expanded="false"
-          class="focusIndicatorRemove emotion-34 emotion-35"
-          dir="ltr"
-          type="button"
+        <div
+          class="emotion-33 emotion-34"
         >
-          <svg
-            aria-hidden="true"
-            class="emotion-36 emotion-37"
-            focusable="false"
-            height="2.75rem"
-            viewBox="0 0 44 44"
-            width="2.75rem"
+          <button
+            aria-expanded="false"
+            class="focusIndicatorRemove emotion-35 emotion-36"
+            dir="ltr"
+            type="button"
           >
-            <path
-              d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
-            />
-          </svg>
-          <span
-            class="emotion-25"
+            <svg
+              aria-hidden="true"
+              class="emotion-37 emotion-38"
+              focusable="false"
+              height="2.75rem"
+              viewBox="0 0 44 44"
+              width="2.75rem"
+            >
+              <path
+                d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
+              />
+            </svg>
+            <span
+              class="emotion-26"
+            >
+              Sections
+            </span>
+          </button>
+          <div
+            class="emotion-40 emotion-41"
+            data-e2e="scrollable-nav"
+            dir="ltr"
           >
-            Sections
-          </span>
-        </button>
+            <ul
+              class="emotion-42 emotion-43"
+              role="list"
+            >
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news"
+                >
+                  Home
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/uk"
+                >
+                  UK
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/world"
+                >
+                  World
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/business"
+                >
+                  Business
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/politics"
+                >
+                  Politics
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/technology"
+                >
+                  Tech
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/science_and_environment"
+                >
+                  Science
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/health"
+                >
+                  Health
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/education"
+                >
+                  Family & Education
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/entertainment_and_arts"
+                >
+                  Entertainment & Arts
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/stories"
+                >
+                  Stories
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
         <div
-          class="emotion-39 emotion-40"
-          data-e2e="scrollable-nav"
-          dir="ltr"
+          class="emotion-88 emotion-89"
+          data-e2e="dropdown-nav"
+          height="0"
         >
           <ul
-            class="emotion-41 emotion-42"
+            class="emotion-90 emotion-91"
             role="list"
           >
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-home"
+                class="emotion-94 emotion-95"
                 href="/news"
               >
-                Home
+                <span
+                  id="dropdownNavigation-home"
+                >
+                  Home
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-uk"
+                class="emotion-94 emotion-95"
                 href="/news/uk"
               >
-                UK
+                <span
+                  id="dropdownNavigation-uk"
+                >
+                  UK
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-world"
+                class="emotion-94 emotion-95"
                 href="/news/world"
               >
-                World
+                <span
+                  id="dropdownNavigation-world"
+                >
+                  World
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-business"
+                class="emotion-94 emotion-95"
                 href="/news/business"
               >
-                Business
+                <span
+                  id="dropdownNavigation-business"
+                >
+                  Business
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-politics"
+                class="emotion-94 emotion-95"
                 href="/news/politics"
               >
-                Politics
+                <span
+                  id="dropdownNavigation-politics"
+                >
+                  Politics
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-tech"
+                class="emotion-94 emotion-95"
                 href="/news/technology"
               >
-                Tech
+                <span
+                  id="dropdownNavigation-tech"
+                >
+                  Tech
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-science"
+                class="emotion-94 emotion-95"
                 href="/news/science_and_environment"
               >
-                Science
+                <span
+                  id="dropdownNavigation-science"
+                >
+                  Science
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-health"
+                class="emotion-94 emotion-95"
                 href="/news/health"
               >
-                Health
+                <span
+                  id="dropdownNavigation-health"
+                >
+                  Health
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-family-&-education"
+                class="emotion-94 emotion-95"
                 href="/news/education"
               >
-                Family & Education
+                <span
+                  id="dropdownNavigation-family-&-education"
+                >
+                  Family & Education
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-entertainment-&-arts"
+                class="emotion-94 emotion-95"
                 href="/news/entertainment_and_arts"
               >
-                Entertainment & Arts
+                <span
+                  id="dropdownNavigation-entertainment-&-arts"
+                >
+                  Entertainment & Arts
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-stories"
+                class="emotion-94 emotion-95"
                 href="/news/stories"
               >
-                Stories
+                <span
+                  id="dropdownNavigation-stories"
+                >
+                  Stories
+                </span>
               </a>
             </li>
           </ul>
         </div>
+        <div
+          class="emotion-136 emotion-137"
+        />
       </div>
-      <div
-        class="emotion-87 emotion-88"
-        data-e2e="dropdown-nav"
-        height="0"
-      >
-        <ul
-          class="emotion-89 emotion-90"
-          role="list"
-        >
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-home"
-              class="emotion-93 emotion-94"
-              href="/news"
-            >
-              <span
-                id="dropdownNavigation-home"
-              >
-                Home
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-uk"
-              class="emotion-93 emotion-94"
-              href="/news/uk"
-            >
-              <span
-                id="dropdownNavigation-uk"
-              >
-                UK
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-world"
-              class="emotion-93 emotion-94"
-              href="/news/world"
-            >
-              <span
-                id="dropdownNavigation-world"
-              >
-                World
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-business"
-              class="emotion-93 emotion-94"
-              href="/news/business"
-            >
-              <span
-                id="dropdownNavigation-business"
-              >
-                Business
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-politics"
-              class="emotion-93 emotion-94"
-              href="/news/politics"
-            >
-              <span
-                id="dropdownNavigation-politics"
-              >
-                Politics
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-tech"
-              class="emotion-93 emotion-94"
-              href="/news/technology"
-            >
-              <span
-                id="dropdownNavigation-tech"
-              >
-                Tech
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-science"
-              class="emotion-93 emotion-94"
-              href="/news/science_and_environment"
-            >
-              <span
-                id="dropdownNavigation-science"
-              >
-                Science
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-health"
-              class="emotion-93 emotion-94"
-              href="/news/health"
-            >
-              <span
-                id="dropdownNavigation-health"
-              >
-                Health
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-family-&-education"
-              class="emotion-93 emotion-94"
-              href="/news/education"
-            >
-              <span
-                id="dropdownNavigation-family-&-education"
-              >
-                Family & Education
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-entertainment-&-arts"
-              class="emotion-93 emotion-94"
-              href="/news/entertainment_and_arts"
-            >
-              <span
-                id="dropdownNavigation-entertainment-&-arts"
-              >
-                Entertainment & Arts
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-stories"
-              class="emotion-93 emotion-94"
-              href="/news/stories"
-            >
-              <span
-                id="dropdownNavigation-stories"
-              >
-                Stories
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div
-        class="emotion-135 emotion-136"
-      />
-    </div>
-  </nav>
-</header>
+    </nav>
+  </header>
+</div>
 `;
 
 exports[`Header Snapshots should render correctly for WS on demand audio page 1`] = `
 .emotion-0 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  transform: translateY(0);
+  will-change: transform;
+}
+
+.emotion-1 {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -1338,7 +1375,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   z-index: 2147483647;
 }
 
-.emotion-2 {
+.emotion-3 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -1346,48 +1383,48 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   border-top: solid 0.0625rem transparent;
 }
 
-.emotion-4 {
+.emotion-5 {
   max-width: 37.4375rem;
   margin: 0 auto;
 }
 
-.emotion-4 a {
+.emotion-5 a {
   color: #F6A21D;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: solid 0.0625rem #AEAEB5;
 }
 
-.emotion-4 a:focus,
-.emotion-4 a:hover {
+.emotion-5 a:focus,
+.emotion-5 a:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-4 a:hover,
-.emotion-4 a:focus {
+.emotion-5 a:hover,
+.emotion-5 a:focus {
   border-bottom: solid 0.125rem transparent;
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem;
   }
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 1.125rem;
   line-height: 1.375rem;
   color: #FFFFFF;
@@ -1397,24 +1434,24 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-6 {
+  .emotion-7 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-7 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
-.emotion-6:focus {
+.emotion-7:focus {
   outline: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   margin-top: 1rem;
@@ -1423,26 +1460,26 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-9 {
     margin-top: 1.5rem;
   }
 }
 
-.emotion-10 {
+.emotion-11 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   display: -webkit-box;
@@ -1464,20 +1501,20 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-10 li+li {
+.emotion-11 li+li {
   margin-top: 0.5rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1496,7 +1533,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -1505,18 +1542,18 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
     justify-content: space-between;
   }
 
-  .emotion-10 li+li {
+  .emotion-11 li+li {
     margin-top: 0;
   }
 }
 
-.emotion-12 {
+.emotion-13 {
   text-align: center;
   width: 100%;
   word-break: break-word;
 }
 
-.emotion-12 button {
+.emotion-13 button {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   width: 100%;
@@ -1530,42 +1567,42 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-12 button {
+  .emotion-13 button {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12 button {
+  .emotion-13 button {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-12 button:focus,
-.emotion-12 button:hover {
+.emotion-13 button:focus,
+.emotion-13 button:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-12 button:hover,
-.emotion-12 button:focus {
+.emotion-13 button:hover,
+.emotion-13 button:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-12 button:focus-visible {
+.emotion-13 button:focus-visible {
   outline: 0.1875rem solid #000000;
 }
 
 @media (min-width: 25rem) {
-  .emotion-12 {
+  .emotion-13 {
     width: 17.3125rem;
   }
 }
 
-.emotion-12.hide {
+.emotion-13.hide {
   width: 2.75rem;
   height: 2.75rem;
   position: absolute;
@@ -1575,7 +1612,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   padding: 0;
 }
 
-.emotion-12.hide button {
+.emotion-13.hide button {
   width: 2.75rem;
   height: 2.75rem;
   cursor: pointer;
@@ -1583,8 +1620,8 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   border: none;
 }
 
-.emotion-12.hide button:focus::after,
-.emotion-12.hide button:hover::after {
+.emotion-13.hide button:focus::after,
+.emotion-13.hide button:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -1594,7 +1631,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   border: 0.1875rem solid #FFFFFF;
 }
 
-.emotion-12.hide button:focus-visible::after {
+.emotion-13.hide button:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -1605,7 +1642,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   box-shadow: 0 0 0 0.1875rem #FFFFFF inset;
 }
 
-.emotion-12.hide svg {
+.emotion-13.hide svg {
   color: white;
   fill: currentColor;
   position: absolute;
@@ -1613,7 +1650,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   right: 0;
 }
 
-.emotion-17 {
+.emotion-18 {
   background-color: #B80000;
   height: 2.75rem;
   width: 100%;
@@ -1623,36 +1660,36 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 15rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 3.75rem;
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width: 25rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 3.75rem;
     padding: 0 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 4rem;
   }
 }
 
-.emotion-17 svg {
+.emotion-18 svg {
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-17 svg {
+  .emotion-18 svg {
     fill: linkText;
   }
 }
 
-.emotion-19 {
+.emotion-20 {
   height: 100%;
   position: relative;
   display: -webkit-box;
@@ -1675,12 +1712,12 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-19 {
+  .emotion-20 {
     display: block;
   }
 }
 
-.emotion-21 {
+.emotion-22 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1695,15 +1732,15 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   padding-top: 0.125rem;
 }
 
-.emotion-21:hover,
-.emotion-21:focus {
+.emotion-22:hover,
+.emotion-22:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
   margin-bottom: -0.25rem;
 }
 
-.emotion-21:focus-visible::after {
+.emotion-22:focus-visible::after {
   content: '';
   position: absolute;
   top: 0;
@@ -1714,7 +1751,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   outline: 0.25rem solid #FFFFFF;
 }
 
-.emotion-23 {
+.emotion-24 {
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
@@ -1722,24 +1759,24 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 25rem) {
-  .emotion-23 {
+  .emotion-24 {
     height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-24 {
     height: 1.875rem;
   }
 }
 
 @media screen and (-ms-high-contrast: active),print {
-  .emotion-23 {
+  .emotion-24 {
     fill: windowText;
   }
 }
 
-.emotion-25 {
+.emotion-26 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -1750,7 +1787,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   margin: 0;
 }
 
-.emotion-26 {
+.emotion-27 {
   position: absolute;
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -1772,20 +1809,20 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-26 {
+  .emotion-27 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-26 {
+  .emotion-27 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-26:focus {
+.emotion-27:focus {
   -webkit-clip-path: none;
   clip-path: none;
   clip: auto;
@@ -1796,24 +1833,24 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 25rem) {
-  .emotion-26:focus {
+  .emotion-27:focus {
     top: 0.5rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-26 {
+  .emotion-27 {
     padding: 0.5rem;
   }
 }
 
-.emotion-28 {
+.emotion-29 {
   position: relative;
   background-color: #FFFFFF;
 }
 
 @media (min-width: 62.9375rem) {
-  .emotion-28::after {
+  .emotion-29::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -1823,11 +1860,11 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   }
 }
 
-.emotion-28 .emotion-44::after {
+.emotion-29 .emotion-45::after {
   left: 0;
 }
 
-.emotion-30 {
+.emotion-31 {
   position: relative;
   max-width: 63.4rem;
   margin: 0;
@@ -1835,22 +1872,22 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-30 {
+  .emotion-31 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-30 {
+  .emotion-31 {
     margin: 0 auto;
   }
 }
 
-.emotion-32 {
+.emotion-33 {
   position: relative;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: relative;
   padding: 0;
   margin: 0;
@@ -1861,14 +1898,14 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   width: 2.75rem;
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-35:hover,
+.emotion-35:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-34:hover::after,
-.emotion-34:focus::after {
+.emotion-35:hover::after,
+.emotion-35:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -1879,36 +1916,36 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-34 {
+  .emotion-35 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-34 {
+  .emotion-35 {
     height: 2.75rem;
     width: 2.75rem;
   }
 }
 
-.emotion-34 svg {
+.emotion-35 svg {
   vertical-align: middle;
 }
 
-.emotion-36 {
+.emotion-37 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-36 {
+  .emotion-37 {
     fill: linkText;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-39 {
+  .emotion-40 {
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -1917,15 +1954,15 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
     -ms-overflow-style: none;
   }
 
-  .emotion-39::-webkit-scrollbar {
+  .emotion-40::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-39:focus-visible {
+  .emotion-40:focus-visible {
     outline: none;
   }
 
-  .emotion-39:focus-visible::after {
+  .emotion-40:focus-visible::after {
     outline: 0.1875rem solid #000000;
     content: '';
     position: absolute;
@@ -1933,7 +1970,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
     height: 100%;
   }
 
-  .emotion-39:after {
+  .emotion-40:after {
     content: ' ';
     height: 100%;
     width: 3rem;
@@ -1951,13 +1988,13 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   }
 
   @media (min-width: 25rem) {
-    .emotion-39:after {
+    .emotion-40:after {
       width: 6rem;
     }
   }
 }
 
-.emotion-41 {
+.emotion-42 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -1965,12 +2002,12 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-41 {
+  .emotion-42 {
     overflow: hidden;
   }
 }
 
-.emotion-43 {
+.emotion-44 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -1979,13 +2016,13 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-43:last-child {
+  .emotion-44:last-child {
     margin-right: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-43::after {
+  .emotion-44::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -1995,7 +2032,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   }
 }
 
-.emotion-45 {
+.emotion-46 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -2011,26 +2048,26 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-45 {
+  .emotion-46 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-45 {
+  .emotion-46 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-45 {
+  .emotion-46 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-45:hover::after {
+.emotion-46:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2039,7 +2076,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-45:focus::after {
+.emotion-46:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2050,7 +2087,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   border: 0.1875rem solid #000000;
 }
 
-.emotion-45:focus-visible::after {
+.emotion-46:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2061,7 +2098,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
   border: 0.1875rem solid #000000;
 }
 
-.emotion-87 {
+.emotion-88 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -2073,37 +2110,37 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-87 {
+  .emotion-88 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-87 {
+  .emotion-88 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-89 {
+.emotion-90 {
   list-style-type: none;
   margin: 0;
   padding: 0 0.5rem;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-91 {
+.emotion-92 {
   padding: 0.75rem 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-91:last-child {
+.emotion-92:last-child {
   padding-bottom: 0.25rem;
   border: 0;
 }
 
-.emotion-93 {
+.emotion-94 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -2117,40 +2154,40 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-93 {
+  .emotion-94 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-93 {
+  .emotion-94 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-93:hover,
-.emotion-93:focus {
+.emotion-94:hover,
+.emotion-94:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-135 {
+.emotion-136 {
   position: absolute;
   width: calc(100vw - 0.8rem);
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-135 {
+  .emotion-136 {
     width: calc(100vw + 0.8rem);
     inset-inline-start: calc(-1 * (100vw - 1014px) / 2);
   }
 }
 
-.emotion-135::after {
+.emotion-136::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -2160,506 +2197,527 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1`
 }
 
 @media (min-width: 1008px) {
-  .emotion-135 {
+  .emotion-136 {
     display: none;
   }
 }
 
-<header
-  role="banner"
+<div
+  aria-live="polite"
+  class="emotion-0"
 >
-  <div>
-    <div
-      class="emotion-0 emotion-1"
-    >
+  <header
+    role="banner"
+  >
+    <div>
       <div
-        class="emotion-2 emotion-3"
-        dir="ltr"
+        class="emotion-1 emotion-2"
       >
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-3 emotion-4"
           dir="ltr"
         >
-          <h2
-            class="emotion-6 emotion-7"
+          <div
+            class="emotion-5 emotion-6"
             dir="ltr"
-            tabindex="-1"
           >
-            Let us know you agree to cookies
-          </h2>
-          <p
-            class="emotion-8 emotion-9"
-            dir="ltr"
-          >
-            We use 
-            <a
-              class="focusIndicatorReducedWidth"
-              href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
+            <h2
+              class="emotion-7 emotion-8"
+              dir="ltr"
+              tabindex="-1"
             >
-              cookies
-            </a>
-             to give you the best online experience. Please let us know if you agree to all of these cookies.
-          </p>
-          <ul
-            class="emotion-10 emotion-11"
-            dir="ltr"
-            role="list"
-          >
-            <li
-              class="emotion-12 emotion-13"
+              Let us know you agree to cookies
+            </h2>
+            <p
+              class="emotion-9 emotion-10"
               dir="ltr"
             >
-              <button
-                data-cookie-banner="accept"
-                type="button"
+              We use 
+              <a
+                class="focusIndicatorReducedWidth"
+                href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
               >
-                Yes, I agree
-              </button>
-            </li>
-            <li
-              class="emotion-12 emotion-13"
+                cookies
+              </a>
+               to give you the best online experience. Please let us know if you agree to all of these cookies.
+            </p>
+            <ul
+              class="emotion-11 emotion-12"
               dir="ltr"
+              role="list"
             >
-              <span>
-                <a
-                  data-cookie-banner="reject"
-                  href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+              <li
+                class="emotion-13 emotion-14"
+                dir="ltr"
+              >
+                <button
+                  data-cookie-banner="accept"
+                  type="button"
                 >
-                  No, take me to settings
-                </a>
-              </span>
-            </li>
-          </ul>
+                  Yes, I agree
+                </button>
+              </li>
+              <li
+                class="emotion-13 emotion-14"
+                dir="ltr"
+              >
+                <span>
+                  <a
+                    data-cookie-banner="reject"
+                    href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+                  >
+                    No, take me to settings
+                  </a>
+                </span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="emotion-16 emotion-17 emotion-18"
-    >
       <div
-        class="emotion-19 emotion-20"
+        class="emotion-17 emotion-18 emotion-19"
       >
-        <a
-          aria-labelledby="BrandLink-topPage"
-          class="focusIndicatorRemove emotion-21 emotion-22"
-          href="/news"
-          id="topPage"
+        <div
+          class="emotion-20 emotion-21"
         >
-          <svg
-            aria-hidden="true"
-            class="emotion-23 emotion-24"
-            focusable="false"
-            height="32"
-            id="brandSvgHeader"
-            viewBox="0 0 980 142"
-            xmlns="http://www.w3.org/2000/svg"
+          <a
+            aria-labelledby="BrandLink-topPage"
+            class="focusIndicatorRemove emotion-22 emotion-23"
+            href="/news"
+            id="topPage"
           >
-            <g
-              fill-rule="evenodd"
-              stroke="#000"
-              stroke-width=".335"
-              style="stroke: #fff;"
+            <svg
+              aria-hidden="true"
+              class="emotion-24 emotion-25"
+              focusable="false"
+              height="32"
+              id="brandSvgHeader"
+              viewBox="0 0 980 142"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
-              />
-            </g>
-          </svg>
-          <span
-            class="emotion-25"
-            id="BrandLink-topPage"
+              <g
+                fill-rule="evenodd"
+                stroke="#000"
+                stroke-width=".335"
+                style="stroke: #fff;"
+              >
+                <path
+                  d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
+                />
+              </g>
+            </svg>
+            <span
+              class="emotion-26"
+              id="BrandLink-topPage"
+            >
+              BBC News
+            </span>
+          </a>
+          <a
+            class="focusIndicatorRemove emotion-27 emotion-28"
+            dir="ltr"
+            href="#content"
           >
-            BBC News
-          </span>
-        </a>
-        <a
-          class="focusIndicatorRemove emotion-26 emotion-27"
-          dir="ltr"
-          href="#content"
-        >
-          <div>
-            Skip to content
-          </div>
-        </a>
+            <div>
+              Skip to content
+            </div>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
-  <nav
-    class="emotion-28 emotion-29"
-    dir="ltr"
-    role="navigation"
-  >
-    <div
-      class="emotion-30 emotion-31"
+    <nav
+      class="emotion-29 emotion-30"
+      dir="ltr"
+      role="navigation"
     >
       <div
-        class="emotion-32 emotion-33"
+        class="emotion-31 emotion-32"
       >
-        <button
-          aria-expanded="false"
-          class="focusIndicatorRemove emotion-34 emotion-35"
-          dir="ltr"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="emotion-36 emotion-37"
-            focusable="false"
-            height="2.75rem"
-            viewBox="0 0 44 44"
-            width="2.75rem"
-          >
-            <path
-              d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
-            />
-          </svg>
-          <span
-            class="emotion-25"
-          >
-            Sections
-          </span>
-        </button>
         <div
-          class="emotion-39 emotion-40"
-          data-e2e="scrollable-nav"
-          dir="ltr"
+          class="emotion-33 emotion-34"
         >
-          <ul
-            class="emotion-41 emotion-42"
-            role="list"
+          <button
+            aria-expanded="false"
+            class="focusIndicatorRemove emotion-35 emotion-36"
+            dir="ltr"
+            type="button"
           >
-            <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
-              role="listitem"
+            <svg
+              aria-hidden="true"
+              class="emotion-37 emotion-38"
+              focusable="false"
+              height="2.75rem"
+              viewBox="0 0 44 44"
+              width="2.75rem"
             >
-              <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news"
-              >
-                Home
-              </a>
-            </li>
-            <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
-              role="listitem"
+              <path
+                d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
+              />
+            </svg>
+            <span
+              class="emotion-26"
             >
-              <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/uk"
-              >
-                UK
-              </a>
-            </li>
-            <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
-              role="listitem"
+              Sections
+            </span>
+          </button>
+          <div
+            class="emotion-40 emotion-41"
+            data-e2e="scrollable-nav"
+            dir="ltr"
+          >
+            <ul
+              class="emotion-42 emotion-43"
+              role="list"
             >
-              <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/world"
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
               >
-                World
-              </a>
-            </li>
-            <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
-              role="listitem"
-            >
-              <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/business"
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news"
+                >
+                  Home
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
               >
-                Business
-              </a>
-            </li>
-            <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
-              role="listitem"
-            >
-              <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/politics"
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/uk"
+                >
+                  UK
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
               >
-                Politics
-              </a>
-            </li>
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/world"
+                >
+                  World
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/business"
+                >
+                  Business
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/politics"
+                >
+                  Politics
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/technology"
+                >
+                  Tech
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/science_and_environment"
+                >
+                  Science
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/health"
+                >
+                  Health
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/education"
+                >
+                  Family & Education
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/entertainment_and_arts"
+                >
+                  Entertainment & Arts
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/stories"
+                >
+                  Stories
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          class="emotion-88 emotion-89"
+          data-e2e="dropdown-nav"
+          height="0"
+        >
+          <ul
+            class="emotion-90 emotion-91"
+            role="list"
+          >
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/technology"
+                aria-labelledby="dropdownNavigation-home"
+                class="emotion-94 emotion-95"
+                href="/news"
               >
-                Tech
+                <span
+                  id="dropdownNavigation-home"
+                >
+                  Home
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/science_and_environment"
+                aria-labelledby="dropdownNavigation-uk"
+                class="emotion-94 emotion-95"
+                href="/news/uk"
               >
-                Science
+                <span
+                  id="dropdownNavigation-uk"
+                >
+                  UK
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/health"
+                aria-labelledby="dropdownNavigation-world"
+                class="emotion-94 emotion-95"
+                href="/news/world"
               >
-                Health
+                <span
+                  id="dropdownNavigation-world"
+                >
+                  World
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/education"
+                aria-labelledby="dropdownNavigation-business"
+                class="emotion-94 emotion-95"
+                href="/news/business"
               >
-                Family & Education
+                <span
+                  id="dropdownNavigation-business"
+                >
+                  Business
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/entertainment_and_arts"
+                aria-labelledby="dropdownNavigation-politics"
+                class="emotion-94 emotion-95"
+                href="/news/politics"
               >
-                Entertainment & Arts
+                <span
+                  id="dropdownNavigation-politics"
+                >
+                  Politics
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
-                href="/news/stories"
+                aria-labelledby="dropdownNavigation-tech"
+                class="emotion-94 emotion-95"
+                href="/news/technology"
               >
-                Stories
+                <span
+                  id="dropdownNavigation-tech"
+                >
+                  Tech
+                </span>
               </a>
             </li>
-          </ul>
-        </div>
-      </div>
-      <div
-        class="emotion-87 emotion-88"
-        data-e2e="dropdown-nav"
-        height="0"
-      >
-        <ul
-          class="emotion-89 emotion-90"
-          role="list"
-        >
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-home"
-              class="emotion-93 emotion-94"
-              href="/news"
-            >
-              <span
-                id="dropdownNavigation-home"
-              >
-                Home
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-uk"
-              class="emotion-93 emotion-94"
-              href="/news/uk"
-            >
-              <span
-                id="dropdownNavigation-uk"
-              >
-                UK
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-world"
-              class="emotion-93 emotion-94"
-              href="/news/world"
-            >
-              <span
-                id="dropdownNavigation-world"
-              >
-                World
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-business"
-              class="emotion-93 emotion-94"
-              href="/news/business"
-            >
-              <span
-                id="dropdownNavigation-business"
-              >
-                Business
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-politics"
-              class="emotion-93 emotion-94"
-              href="/news/politics"
-            >
-              <span
-                id="dropdownNavigation-politics"
-              >
-                Politics
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-tech"
-              class="emotion-93 emotion-94"
-              href="/news/technology"
-            >
-              <span
-                id="dropdownNavigation-tech"
-              >
-                Tech
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-science"
-              class="emotion-93 emotion-94"
-              href="/news/science_and_environment"
+            <li
+              class="emotion-92 emotion-93"
+              role="listitem"
             >
-              <span
-                id="dropdownNavigation-science"
+              <a
+                aria-labelledby="dropdownNavigation-science"
+                class="emotion-94 emotion-95"
+                href="/news/science_and_environment"
               >
-                Science
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-health"
-              class="emotion-93 emotion-94"
-              href="/news/health"
+                <span
+                  id="dropdownNavigation-science"
+                >
+                  Science
+                </span>
+              </a>
+            </li>
+            <li
+              class="emotion-92 emotion-93"
+              role="listitem"
             >
-              <span
-                id="dropdownNavigation-health"
+              <a
+                aria-labelledby="dropdownNavigation-health"
+                class="emotion-94 emotion-95"
+                href="/news/health"
               >
-                Health
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-family-&-education"
-              class="emotion-93 emotion-94"
-              href="/news/education"
+                <span
+                  id="dropdownNavigation-health"
+                >
+                  Health
+                </span>
+              </a>
+            </li>
+            <li
+              class="emotion-92 emotion-93"
+              role="listitem"
             >
-              <span
-                id="dropdownNavigation-family-&-education"
+              <a
+                aria-labelledby="dropdownNavigation-family-&-education"
+                class="emotion-94 emotion-95"
+                href="/news/education"
               >
-                Family & Education
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-entertainment-&-arts"
-              class="emotion-93 emotion-94"
-              href="/news/entertainment_and_arts"
+                <span
+                  id="dropdownNavigation-family-&-education"
+                >
+                  Family & Education
+                </span>
+              </a>
+            </li>
+            <li
+              class="emotion-92 emotion-93"
+              role="listitem"
             >
-              <span
-                id="dropdownNavigation-entertainment-&-arts"
+              <a
+                aria-labelledby="dropdownNavigation-entertainment-&-arts"
+                class="emotion-94 emotion-95"
+                href="/news/entertainment_and_arts"
               >
-                Entertainment & Arts
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-stories"
-              class="emotion-93 emotion-94"
-              href="/news/stories"
+                <span
+                  id="dropdownNavigation-entertainment-&-arts"
+                >
+                  Entertainment & Arts
+                </span>
+              </a>
+            </li>
+            <li
+              class="emotion-92 emotion-93"
+              role="listitem"
             >
-              <span
-                id="dropdownNavigation-stories"
+              <a
+                aria-labelledby="dropdownNavigation-stories"
+                class="emotion-94 emotion-95"
+                href="/news/stories"
               >
-                Stories
-              </span>
-            </a>
-          </li>
-        </ul>
+                <span
+                  id="dropdownNavigation-stories"
+                >
+                  Stories
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div
+          class="emotion-136 emotion-137"
+        />
       </div>
-      <div
-        class="emotion-135 emotion-136"
-      />
-    </div>
-  </nav>
-</header>
+    </nav>
+  </header>
+</div>
 `;
 
 exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 .emotion-0 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  transform: translateY(0);
+  will-change: transform;
+}
+
+.emotion-1 {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -2667,7 +2725,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   z-index: 2147483647;
 }
 
-.emotion-2 {
+.emotion-3 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -2675,48 +2733,48 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   border-top: solid 0.0625rem transparent;
 }
 
-.emotion-4 {
+.emotion-5 {
   max-width: 37.4375rem;
   margin: 0 auto;
 }
 
-.emotion-4 a {
+.emotion-5 a {
   color: #F6A21D;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: solid 0.0625rem #AEAEB5;
 }
 
-.emotion-4 a:focus,
-.emotion-4 a:hover {
+.emotion-5 a:focus,
+.emotion-5 a:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-4 a:hover,
-.emotion-4 a:focus {
+.emotion-5 a:hover,
+.emotion-5 a:focus {
   border-bottom: solid 0.125rem transparent;
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem;
   }
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 1.125rem;
   line-height: 1.375rem;
   color: #FFFFFF;
@@ -2726,24 +2784,24 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-6 {
+  .emotion-7 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-7 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
-.emotion-6:focus {
+.emotion-7:focus {
   outline: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   margin-top: 1rem;
@@ -2752,26 +2810,26 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-9 {
     margin-top: 1.5rem;
   }
 }
 
-.emotion-10 {
+.emotion-11 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   display: -webkit-box;
@@ -2793,20 +2851,20 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-10 li+li {
+.emotion-11 li+li {
   margin-top: 0.5rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -2825,7 +2883,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -2834,18 +2892,18 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
     justify-content: space-between;
   }
 
-  .emotion-10 li+li {
+  .emotion-11 li+li {
     margin-top: 0;
   }
 }
 
-.emotion-12 {
+.emotion-13 {
   text-align: center;
   width: 100%;
   word-break: break-word;
 }
 
-.emotion-12 button {
+.emotion-13 button {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   width: 100%;
@@ -2859,42 +2917,42 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-12 button {
+  .emotion-13 button {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12 button {
+  .emotion-13 button {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-12 button:focus,
-.emotion-12 button:hover {
+.emotion-13 button:focus,
+.emotion-13 button:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-12 button:hover,
-.emotion-12 button:focus {
+.emotion-13 button:hover,
+.emotion-13 button:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-12 button:focus-visible {
+.emotion-13 button:focus-visible {
   outline: 0.1875rem solid #000000;
 }
 
 @media (min-width: 25rem) {
-  .emotion-12 {
+  .emotion-13 {
     width: 17.3125rem;
   }
 }
 
-.emotion-12.hide {
+.emotion-13.hide {
   width: 2.75rem;
   height: 2.75rem;
   position: absolute;
@@ -2904,7 +2962,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   padding: 0;
 }
 
-.emotion-12.hide button {
+.emotion-13.hide button {
   width: 2.75rem;
   height: 2.75rem;
   cursor: pointer;
@@ -2912,8 +2970,8 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   border: none;
 }
 
-.emotion-12.hide button:focus::after,
-.emotion-12.hide button:hover::after {
+.emotion-13.hide button:focus::after,
+.emotion-13.hide button:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2923,7 +2981,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   border: 0.1875rem solid #FFFFFF;
 }
 
-.emotion-12.hide button:focus-visible::after {
+.emotion-13.hide button:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -2934,7 +2992,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   box-shadow: 0 0 0 0.1875rem #FFFFFF inset;
 }
 
-.emotion-12.hide svg {
+.emotion-13.hide svg {
   color: white;
   fill: currentColor;
   position: absolute;
@@ -2942,7 +3000,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   right: 0;
 }
 
-.emotion-17 {
+.emotion-18 {
   background-color: #B80000;
   height: 2.75rem;
   width: 100%;
@@ -2952,36 +3010,36 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 15rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 3.75rem;
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width: 25rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 3.75rem;
     padding: 0 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 4rem;
   }
 }
 
-.emotion-17 svg {
+.emotion-18 svg {
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-17 svg {
+  .emotion-18 svg {
     fill: linkText;
   }
 }
 
-.emotion-19 {
+.emotion-20 {
   height: 100%;
   position: relative;
   display: -webkit-box;
@@ -3004,12 +3062,12 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-19 {
+  .emotion-20 {
     display: block;
   }
 }
 
-.emotion-21 {
+.emotion-22 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3024,15 +3082,15 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   padding-top: 0.125rem;
 }
 
-.emotion-21:hover,
-.emotion-21:focus {
+.emotion-22:hover,
+.emotion-22:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
   margin-bottom: -0.25rem;
 }
 
-.emotion-21:focus-visible::after {
+.emotion-22:focus-visible::after {
   content: '';
   position: absolute;
   top: 0;
@@ -3043,7 +3101,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   outline: 0.25rem solid #FFFFFF;
 }
 
-.emotion-23 {
+.emotion-24 {
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
@@ -3051,24 +3109,24 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-23 {
+  .emotion-24 {
     height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-24 {
     height: 1.875rem;
   }
 }
 
 @media screen and (-ms-high-contrast: active),print {
-  .emotion-23 {
+  .emotion-24 {
     fill: windowText;
   }
 }
 
-.emotion-25 {
+.emotion-26 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -3079,7 +3137,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   margin: 0;
 }
 
-.emotion-26 {
+.emotion-27 {
   position: absolute;
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -3101,20 +3159,20 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-26 {
+  .emotion-27 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-26 {
+  .emotion-27 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-26:focus {
+.emotion-27:focus {
   -webkit-clip-path: none;
   clip-path: none;
   clip: auto;
@@ -3125,24 +3183,24 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-26:focus {
+  .emotion-27:focus {
     top: 0.5rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-26 {
+  .emotion-27 {
     padding: 0.5rem;
   }
 }
 
-.emotion-28 {
+.emotion-29 {
   position: relative;
   background-color: #FFFFFF;
 }
 
 @media (min-width: 62.9375rem) {
-  .emotion-28::after {
+  .emotion-29::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -3152,11 +3210,11 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   }
 }
 
-.emotion-28 .emotion-44::after {
+.emotion-29 .emotion-45::after {
   left: 0;
 }
 
-.emotion-30 {
+.emotion-31 {
   position: relative;
   max-width: 63.4rem;
   margin: 0;
@@ -3164,22 +3222,22 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-30 {
+  .emotion-31 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-30 {
+  .emotion-31 {
     margin: 0 auto;
   }
 }
 
-.emotion-32 {
+.emotion-33 {
   position: relative;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: relative;
   padding: 0;
   margin: 0;
@@ -3190,14 +3248,14 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   width: 2.75rem;
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-35:hover,
+.emotion-35:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-34:hover::after,
-.emotion-34:focus::after {
+.emotion-35:hover::after,
+.emotion-35:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -3208,36 +3266,36 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-34 {
+  .emotion-35 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-34 {
+  .emotion-35 {
     height: 2.75rem;
     width: 2.75rem;
   }
 }
 
-.emotion-34 svg {
+.emotion-35 svg {
   vertical-align: middle;
 }
 
-.emotion-36 {
+.emotion-37 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-36 {
+  .emotion-37 {
     fill: linkText;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-39 {
+  .emotion-40 {
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -3246,15 +3304,15 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-39::-webkit-scrollbar {
+  .emotion-40::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-39:focus-visible {
+  .emotion-40:focus-visible {
     outline: none;
   }
 
-  .emotion-39:focus-visible::after {
+  .emotion-40:focus-visible::after {
     outline: 0.1875rem solid #000000;
     content: '';
     position: absolute;
@@ -3262,7 +3320,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
     height: 100%;
   }
 
-  .emotion-39:after {
+  .emotion-40:after {
     content: ' ';
     height: 100%;
     width: 3rem;
@@ -3280,13 +3338,13 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   }
 
   @media (min-width: 25rem) {
-    .emotion-39:after {
+    .emotion-40:after {
       width: 6rem;
     }
   }
 }
 
-.emotion-41 {
+.emotion-42 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -3294,12 +3352,12 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-41 {
+  .emotion-42 {
     overflow: hidden;
   }
 }
 
-.emotion-43 {
+.emotion-44 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -3308,13 +3366,13 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-43:last-child {
+  .emotion-44:last-child {
     margin-right: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-43::after {
+  .emotion-44::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -3324,7 +3382,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   }
 }
 
-.emotion-45 {
+.emotion-46 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -3340,26 +3398,26 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-45 {
+  .emotion-46 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-45 {
+  .emotion-46 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-45 {
+  .emotion-46 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-45:hover::after {
+.emotion-46:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -3368,7 +3426,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-45:focus::after {
+.emotion-46:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -3379,7 +3437,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   border: 0.1875rem solid #000000;
 }
 
-.emotion-45:focus-visible::after {
+.emotion-46:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -3390,7 +3448,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
   border: 0.1875rem solid #000000;
 }
 
-.emotion-87 {
+.emotion-88 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -3402,37 +3460,37 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-87 {
+  .emotion-88 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-87 {
+  .emotion-88 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-89 {
+.emotion-90 {
   list-style-type: none;
   margin: 0;
   padding: 0 0.5rem;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-91 {
+.emotion-92 {
   padding: 0.75rem 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-91:last-child {
+.emotion-92:last-child {
   padding-bottom: 0.25rem;
   border: 0;
 }
 
-.emotion-93 {
+.emotion-94 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -3446,40 +3504,40 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-93 {
+  .emotion-94 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-93 {
+  .emotion-94 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-93:hover,
-.emotion-93:focus {
+.emotion-94:hover,
+.emotion-94:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-135 {
+.emotion-136 {
   position: absolute;
   width: calc(100vw - 0.8rem);
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-135 {
+  .emotion-136 {
     width: calc(100vw + 0.8rem);
     inset-inline-start: calc(-1 * (100vw - 1014px) / 2);
   }
 }
 
-.emotion-135::after {
+.emotion-136::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -3489,506 +3547,527 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 }
 
 @media (min-width: 1008px) {
-  .emotion-135 {
+  .emotion-136 {
     display: none;
   }
 }
 
-<header
-  role="banner"
+<div
+  aria-live="polite"
+  class="emotion-0"
 >
-  <div>
-    <div
-      class="emotion-0 emotion-1"
-    >
+  <header
+    role="banner"
+  >
+    <div>
       <div
-        class="emotion-2 emotion-3"
-        dir="ltr"
+        class="emotion-1 emotion-2"
       >
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-3 emotion-4"
           dir="ltr"
         >
-          <h2
-            class="emotion-6 emotion-7"
-            dir="ltr"
-            tabindex="-1"
-          >
-            Let us know you agree to cookies
-          </h2>
-          <p
-            class="emotion-8 emotion-9"
+          <div
+            class="emotion-5 emotion-6"
             dir="ltr"
           >
-            We use 
-            <a
-              class="focusIndicatorReducedWidth"
-              href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
+            <h2
+              class="emotion-7 emotion-8"
+              dir="ltr"
+              tabindex="-1"
             >
-              cookies
-            </a>
-             to give you the best online experience. Please let us know if you agree to all of these cookies.
-          </p>
-          <ul
-            class="emotion-10 emotion-11"
-            dir="ltr"
-            role="list"
-          >
-            <li
-              class="emotion-12 emotion-13"
+              Let us know you agree to cookies
+            </h2>
+            <p
+              class="emotion-9 emotion-10"
               dir="ltr"
             >
-              <button
-                data-cookie-banner="accept"
-                type="button"
+              We use 
+              <a
+                class="focusIndicatorReducedWidth"
+                href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
               >
-                Yes, I agree
-              </button>
-            </li>
-            <li
-              class="emotion-12 emotion-13"
+                cookies
+              </a>
+               to give you the best online experience. Please let us know if you agree to all of these cookies.
+            </p>
+            <ul
+              class="emotion-11 emotion-12"
               dir="ltr"
+              role="list"
             >
-              <span>
-                <a
-                  data-cookie-banner="reject"
-                  href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+              <li
+                class="emotion-13 emotion-14"
+                dir="ltr"
+              >
+                <button
+                  data-cookie-banner="accept"
+                  type="button"
                 >
-                  No, take me to settings
-                </a>
-              </span>
-            </li>
-          </ul>
+                  Yes, I agree
+                </button>
+              </li>
+              <li
+                class="emotion-13 emotion-14"
+                dir="ltr"
+              >
+                <span>
+                  <a
+                    data-cookie-banner="reject"
+                    href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+                  >
+                    No, take me to settings
+                  </a>
+                </span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="emotion-16 emotion-17 emotion-18"
-    >
       <div
-        class="emotion-19 emotion-20"
+        class="emotion-17 emotion-18 emotion-19"
       >
-        <a
-          aria-labelledby="BrandLink-topPage"
-          class="focusIndicatorRemove emotion-21 emotion-22"
-          href="/news"
-          id="topPage"
+        <div
+          class="emotion-20 emotion-21"
         >
-          <svg
-            aria-hidden="true"
-            class="emotion-23 emotion-24"
-            focusable="false"
-            height="32"
-            id="brandSvgHeader"
-            viewBox="0 0 980 142"
-            xmlns="http://www.w3.org/2000/svg"
+          <a
+            aria-labelledby="BrandLink-topPage"
+            class="focusIndicatorRemove emotion-22 emotion-23"
+            href="/news"
+            id="topPage"
           >
-            <g
-              fill-rule="evenodd"
-              stroke="#000"
-              stroke-width=".335"
-              style="stroke: #fff;"
+            <svg
+              aria-hidden="true"
+              class="emotion-24 emotion-25"
+              focusable="false"
+              height="32"
+              id="brandSvgHeader"
+              viewBox="0 0 980 142"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
-              />
-            </g>
-          </svg>
-          <span
-            class="emotion-25"
-            id="BrandLink-topPage"
+              <g
+                fill-rule="evenodd"
+                stroke="#000"
+                stroke-width=".335"
+                style="stroke: #fff;"
+              >
+                <path
+                  d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
+                />
+              </g>
+            </svg>
+            <span
+              class="emotion-26"
+              id="BrandLink-topPage"
+            >
+              BBC News
+            </span>
+          </a>
+          <a
+            class="focusIndicatorRemove emotion-27 emotion-28"
+            dir="ltr"
+            href="#content"
           >
-            BBC News
-          </span>
-        </a>
-        <a
-          class="focusIndicatorRemove emotion-26 emotion-27"
-          dir="ltr"
-          href="#content"
-        >
-          <div>
-            Skip to content
-          </div>
-        </a>
+            <div>
+              Skip to content
+            </div>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
-  <nav
-    class="emotion-28 emotion-29"
-    dir="ltr"
-    role="navigation"
-  >
-    <div
-      class="emotion-30 emotion-31"
+    <nav
+      class="emotion-29 emotion-30"
+      dir="ltr"
+      role="navigation"
     >
       <div
-        class="emotion-32 emotion-33"
+        class="emotion-31 emotion-32"
       >
-        <button
-          aria-expanded="false"
-          class="focusIndicatorRemove emotion-34 emotion-35"
-          dir="ltr"
-          type="button"
+        <div
+          class="emotion-33 emotion-34"
         >
-          <svg
-            aria-hidden="true"
-            class="emotion-36 emotion-37"
-            focusable="false"
-            height="2.75rem"
-            viewBox="0 0 44 44"
-            width="2.75rem"
+          <button
+            aria-expanded="false"
+            class="focusIndicatorRemove emotion-35 emotion-36"
+            dir="ltr"
+            type="button"
           >
-            <path
-              d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
-            />
-          </svg>
-          <span
-            class="emotion-25"
+            <svg
+              aria-hidden="true"
+              class="emotion-37 emotion-38"
+              focusable="false"
+              height="2.75rem"
+              viewBox="0 0 44 44"
+              width="2.75rem"
+            >
+              <path
+                d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
+              />
+            </svg>
+            <span
+              class="emotion-26"
+            >
+              Sections
+            </span>
+          </button>
+          <div
+            class="emotion-40 emotion-41"
+            data-e2e="scrollable-nav"
+            dir="ltr"
           >
-            Sections
-          </span>
-        </button>
+            <ul
+              class="emotion-42 emotion-43"
+              role="list"
+            >
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news"
+                >
+                  Home
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/uk"
+                >
+                  UK
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/world"
+                >
+                  World
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/business"
+                >
+                  Business
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/politics"
+                >
+                  Politics
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/technology"
+                >
+                  Tech
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/science_and_environment"
+                >
+                  Science
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/health"
+                >
+                  Health
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/education"
+                >
+                  Family & Education
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/entertainment_and_arts"
+                >
+                  Entertainment & Arts
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/stories"
+                >
+                  Stories
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
         <div
-          class="emotion-39 emotion-40"
-          data-e2e="scrollable-nav"
-          dir="ltr"
+          class="emotion-88 emotion-89"
+          data-e2e="dropdown-nav"
+          height="0"
         >
           <ul
-            class="emotion-41 emotion-42"
+            class="emotion-90 emotion-91"
             role="list"
           >
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-home"
+                class="emotion-94 emotion-95"
                 href="/news"
               >
-                Home
+                <span
+                  id="dropdownNavigation-home"
+                >
+                  Home
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-uk"
+                class="emotion-94 emotion-95"
                 href="/news/uk"
               >
-                UK
+                <span
+                  id="dropdownNavigation-uk"
+                >
+                  UK
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-world"
+                class="emotion-94 emotion-95"
                 href="/news/world"
               >
-                World
+                <span
+                  id="dropdownNavigation-world"
+                >
+                  World
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-business"
+                class="emotion-94 emotion-95"
                 href="/news/business"
               >
-                Business
+                <span
+                  id="dropdownNavigation-business"
+                >
+                  Business
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-politics"
+                class="emotion-94 emotion-95"
                 href="/news/politics"
               >
-                Politics
+                <span
+                  id="dropdownNavigation-politics"
+                >
+                  Politics
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-tech"
+                class="emotion-94 emotion-95"
                 href="/news/technology"
               >
-                Tech
+                <span
+                  id="dropdownNavigation-tech"
+                >
+                  Tech
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-science"
+                class="emotion-94 emotion-95"
                 href="/news/science_and_environment"
               >
-                Science
+                <span
+                  id="dropdownNavigation-science"
+                >
+                  Science
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-health"
+                class="emotion-94 emotion-95"
                 href="/news/health"
               >
-                Health
+                <span
+                  id="dropdownNavigation-health"
+                >
+                  Health
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-family-&-education"
+                class="emotion-94 emotion-95"
                 href="/news/education"
               >
-                Family & Education
+                <span
+                  id="dropdownNavigation-family-&-education"
+                >
+                  Family & Education
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-entertainment-&-arts"
+                class="emotion-94 emotion-95"
                 href="/news/entertainment_and_arts"
               >
-                Entertainment & Arts
+                <span
+                  id="dropdownNavigation-entertainment-&-arts"
+                >
+                  Entertainment & Arts
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-stories"
+                class="emotion-94 emotion-95"
                 href="/news/stories"
               >
-                Stories
+                <span
+                  id="dropdownNavigation-stories"
+                >
+                  Stories
+                </span>
               </a>
             </li>
           </ul>
         </div>
+        <div
+          class="emotion-136 emotion-137"
+        />
       </div>
-      <div
-        class="emotion-87 emotion-88"
-        data-e2e="dropdown-nav"
-        height="0"
-      >
-        <ul
-          class="emotion-89 emotion-90"
-          role="list"
-        >
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-home"
-              class="emotion-93 emotion-94"
-              href="/news"
-            >
-              <span
-                id="dropdownNavigation-home"
-              >
-                Home
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-uk"
-              class="emotion-93 emotion-94"
-              href="/news/uk"
-            >
-              <span
-                id="dropdownNavigation-uk"
-              >
-                UK
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-world"
-              class="emotion-93 emotion-94"
-              href="/news/world"
-            >
-              <span
-                id="dropdownNavigation-world"
-              >
-                World
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-business"
-              class="emotion-93 emotion-94"
-              href="/news/business"
-            >
-              <span
-                id="dropdownNavigation-business"
-              >
-                Business
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-politics"
-              class="emotion-93 emotion-94"
-              href="/news/politics"
-            >
-              <span
-                id="dropdownNavigation-politics"
-              >
-                Politics
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-tech"
-              class="emotion-93 emotion-94"
-              href="/news/technology"
-            >
-              <span
-                id="dropdownNavigation-tech"
-              >
-                Tech
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-science"
-              class="emotion-93 emotion-94"
-              href="/news/science_and_environment"
-            >
-              <span
-                id="dropdownNavigation-science"
-              >
-                Science
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-health"
-              class="emotion-93 emotion-94"
-              href="/news/health"
-            >
-              <span
-                id="dropdownNavigation-health"
-              >
-                Health
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-family-&-education"
-              class="emotion-93 emotion-94"
-              href="/news/education"
-            >
-              <span
-                id="dropdownNavigation-family-&-education"
-              >
-                Family & Education
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-entertainment-&-arts"
-              class="emotion-93 emotion-94"
-              href="/news/entertainment_and_arts"
-            >
-              <span
-                id="dropdownNavigation-entertainment-&-arts"
-              >
-                Entertainment & Arts
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-stories"
-              class="emotion-93 emotion-94"
-              href="/news/stories"
-            >
-              <span
-                id="dropdownNavigation-stories"
-              >
-                Stories
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div
-        class="emotion-135 emotion-136"
-      />
-    </div>
-  </nav>
-</header>
+    </nav>
+  </header>
+</div>
 `;
 
 exports[`Header Snapshots should render correctly for news article 1`] = `
 .emotion-0 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  transform: translateY(0);
+  will-change: transform;
+}
+
+.emotion-1 {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -3996,7 +4075,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   z-index: 2147483647;
 }
 
-.emotion-2 {
+.emotion-3 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -4004,48 +4083,48 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   border-top: solid 0.0625rem transparent;
 }
 
-.emotion-4 {
+.emotion-5 {
   max-width: 37.4375rem;
   margin: 0 auto;
 }
 
-.emotion-4 a {
+.emotion-5 a {
   color: #F6A21D;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: solid 0.0625rem #AEAEB5;
 }
 
-.emotion-4 a:focus,
-.emotion-4 a:hover {
+.emotion-5 a:focus,
+.emotion-5 a:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-4 a:hover,
-.emotion-4 a:focus {
+.emotion-5 a:hover,
+.emotion-5 a:focus {
   border-bottom: solid 0.125rem transparent;
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 2.75rem 1rem 0.5rem 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem;
   }
 }
 
-.emotion-6 {
+.emotion-7 {
   font-size: 1.125rem;
   line-height: 1.375rem;
   color: #FFFFFF;
@@ -4055,24 +4134,24 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-6 {
+  .emotion-7 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-7 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
-.emotion-6:focus {
+.emotion-7:focus {
   outline: none;
 }
 
-.emotion-8 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   margin-top: 1rem;
@@ -4081,26 +4160,26 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-8 {
+  .emotion-9 {
     margin-top: 1.5rem;
   }
 }
 
-.emotion-10 {
+.emotion-11 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   display: -webkit-box;
@@ -4122,20 +4201,20 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-10 li+li {
+.emotion-11 li+li {
   margin-top: 0.5rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -4154,7 +4233,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -4163,18 +4242,18 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
     justify-content: space-between;
   }
 
-  .emotion-10 li+li {
+  .emotion-11 li+li {
     margin-top: 0;
   }
 }
 
-.emotion-12 {
+.emotion-13 {
   text-align: center;
   width: 100%;
   word-break: break-word;
 }
 
-.emotion-12 button {
+.emotion-13 button {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   width: 100%;
@@ -4188,42 +4267,42 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-12 button {
+  .emotion-13 button {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-12 button {
+  .emotion-13 button {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
-.emotion-12 button:focus,
-.emotion-12 button:hover {
+.emotion-13 button:focus,
+.emotion-13 button:hover {
   color: #222222;
   background-color: #F6A21D;
 }
 
-.emotion-12 button:hover,
-.emotion-12 button:focus {
+.emotion-13 button:hover,
+.emotion-13 button:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-12 button:focus-visible {
+.emotion-13 button:focus-visible {
   outline: 0.1875rem solid #000000;
 }
 
 @media (min-width: 25rem) {
-  .emotion-12 {
+  .emotion-13 {
     width: 17.3125rem;
   }
 }
 
-.emotion-12.hide {
+.emotion-13.hide {
   width: 2.75rem;
   height: 2.75rem;
   position: absolute;
@@ -4233,7 +4312,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   padding: 0;
 }
 
-.emotion-12.hide button {
+.emotion-13.hide button {
   width: 2.75rem;
   height: 2.75rem;
   cursor: pointer;
@@ -4241,8 +4320,8 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   border: none;
 }
 
-.emotion-12.hide button:focus::after,
-.emotion-12.hide button:hover::after {
+.emotion-13.hide button:focus::after,
+.emotion-13.hide button:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4252,7 +4331,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   border: 0.1875rem solid #FFFFFF;
 }
 
-.emotion-12.hide button:focus-visible::after {
+.emotion-13.hide button:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4263,7 +4342,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   box-shadow: 0 0 0 0.1875rem #FFFFFF inset;
 }
 
-.emotion-12.hide svg {
+.emotion-13.hide svg {
   color: white;
   fill: currentColor;
   position: absolute;
@@ -4271,7 +4350,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   right: 0;
 }
 
-.emotion-17 {
+.emotion-18 {
   background-color: #B80000;
   height: 2.75rem;
   width: 100%;
@@ -4281,36 +4360,36 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 15rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 3.75rem;
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width: 25rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 3.75rem;
     padding: 0 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-17 {
+  .emotion-18 {
     height: 4rem;
   }
 }
 
-.emotion-17 svg {
+.emotion-18 svg {
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-17 svg {
+  .emotion-18 svg {
     fill: linkText;
   }
 }
 
-.emotion-19 {
+.emotion-20 {
   height: 100%;
   position: relative;
   display: -webkit-box;
@@ -4333,12 +4412,12 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-19 {
+  .emotion-20 {
     display: block;
   }
 }
 
-.emotion-21 {
+.emotion-22 {
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4353,15 +4432,15 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   padding-top: 0.125rem;
 }
 
-.emotion-21:hover,
-.emotion-21:focus {
+.emotion-22:hover,
+.emotion-22:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom: 0.25rem solid #FFFFFF;
   margin-bottom: -0.25rem;
 }
 
-.emotion-21:focus-visible::after {
+.emotion-22:focus-visible::after {
   content: '';
   position: absolute;
   top: 0;
@@ -4372,7 +4451,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   outline: 0.25rem solid #FFFFFF;
 }
 
-.emotion-23 {
+.emotion-24 {
   box-sizing: content-box;
   color: #FFFFFF;
   fill: currentColor;
@@ -4380,24 +4459,24 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-23 {
+  .emotion-24 {
     height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-24 {
     height: 1.875rem;
   }
 }
 
 @media screen and (-ms-high-contrast: active),print {
-  .emotion-23 {
+  .emotion-24 {
     fill: windowText;
   }
 }
 
-.emotion-25 {
+.emotion-26 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -4408,7 +4487,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   margin: 0;
 }
 
-.emotion-26 {
+.emotion-27 {
   position: absolute;
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
@@ -4430,20 +4509,20 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-26 {
+  .emotion-27 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-26 {
+  .emotion-27 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-26:focus {
+.emotion-27:focus {
   -webkit-clip-path: none;
   clip-path: none;
   clip: auto;
@@ -4454,24 +4533,24 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-26:focus {
+  .emotion-27:focus {
     top: 0.5rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-26 {
+  .emotion-27 {
     padding: 0.5rem;
   }
 }
 
-.emotion-28 {
+.emotion-29 {
   position: relative;
   background-color: #FFFFFF;
 }
 
 @media (min-width: 62.9375rem) {
-  .emotion-28::after {
+  .emotion-29::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -4481,11 +4560,11 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   }
 }
 
-.emotion-28 .emotion-44::after {
+.emotion-29 .emotion-45::after {
   left: 0;
 }
 
-.emotion-30 {
+.emotion-31 {
   position: relative;
   max-width: 63.4rem;
   margin: 0;
@@ -4493,22 +4572,22 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-30 {
+  .emotion-31 {
     margin: 0 0.8rem;
   }
 }
 
 @media (min-width: 66rem) {
-  .emotion-30 {
+  .emotion-31 {
     margin: 0 auto;
   }
 }
 
-.emotion-32 {
+.emotion-33 {
   position: relative;
 }
 
-.emotion-34 {
+.emotion-35 {
   position: relative;
   padding: 0;
   margin: 0;
@@ -4519,14 +4598,14 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   width: 2.75rem;
 }
 
-.emotion-34:hover,
-.emotion-34:focus {
+.emotion-35:hover,
+.emotion-35:focus {
   cursor: pointer;
   box-shadow: inset 0 0 0 0.25rem #FFFFFF;
 }
 
-.emotion-34:hover::after,
-.emotion-34:focus::after {
+.emotion-35:hover::after,
+.emotion-35:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4537,36 +4616,36 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-34 {
+  .emotion-35 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (min-width: 20rem) {
-  .emotion-34 {
+  .emotion-35 {
     height: 2.75rem;
     width: 2.75rem;
   }
 }
 
-.emotion-34 svg {
+.emotion-35 svg {
   vertical-align: middle;
 }
 
-.emotion-36 {
+.emotion-37 {
   color: #000000;
   fill: currentColor;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-36 {
+  .emotion-37 {
     fill: linkText;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-39 {
+  .emotion-40 {
     white-space: nowrap;
     overflow-x: scroll;
     scroll-behavior: auto;
@@ -4575,15 +4654,15 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
     -ms-overflow-style: none;
   }
 
-  .emotion-39::-webkit-scrollbar {
+  .emotion-40::-webkit-scrollbar {
     display: none;
   }
 
-  .emotion-39:focus-visible {
+  .emotion-40:focus-visible {
     outline: none;
   }
 
-  .emotion-39:focus-visible::after {
+  .emotion-40:focus-visible::after {
     outline: 0.1875rem solid #000000;
     content: '';
     position: absolute;
@@ -4591,7 +4670,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
     height: 100%;
   }
 
-  .emotion-39:after {
+  .emotion-40:after {
     content: ' ';
     height: 100%;
     width: 3rem;
@@ -4609,13 +4688,13 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   }
 
   @media (min-width: 25rem) {
-    .emotion-39:after {
+    .emotion-40:after {
       width: 6rem;
     }
   }
 }
 
-.emotion-41 {
+.emotion-42 {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -4623,12 +4702,12 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-41 {
+  .emotion-42 {
     overflow: hidden;
   }
 }
 
-.emotion-43 {
+.emotion-44 {
   display: inline-block;
   position: relative;
   z-index: 2;
@@ -4637,13 +4716,13 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-43:last-child {
+  .emotion-44:last-child {
     margin-right: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-43::after {
+  .emotion-44::after {
     content: '';
     position: absolute;
     bottom: -1px;
@@ -4653,7 +4732,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   }
 }
 
-.emotion-45 {
+.emotion-46 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -4669,26 +4748,26 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-45 {
+  .emotion-46 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-45 {
+  .emotion-46 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 37.4375rem) {
-  .emotion-45 {
+  .emotion-46 {
     padding: 0.75rem 0.5rem;
   }
 }
 
-.emotion-45:hover::after {
+.emotion-46:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4697,7 +4776,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   border-bottom: 0.25rem solid #B80000;
 }
 
-.emotion-45:focus::after {
+.emotion-46:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4708,7 +4787,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   border: 0.1875rem solid #000000;
 }
 
-.emotion-45:focus-visible::after {
+.emotion-46:focus-visible::after {
   content: '';
   position: absolute;
   left: 0;
@@ -4719,7 +4798,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
   border: 0.1875rem solid #000000;
 }
 
-.emotion-87 {
+.emotion-88 {
   background-color: #FFFFFF;
   clear: both;
   overflow: hidden;
@@ -4731,37 +4810,37 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-87 {
+  .emotion-88 {
     display: none;
     visibility: hidden;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .emotion-87 {
+  .emotion-88 {
     -webkit-transition: none;
     transition: none;
   }
 }
 
-.emotion-89 {
+.emotion-90 {
   list-style-type: none;
   margin: 0;
   padding: 0 0.5rem;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-91 {
+.emotion-92 {
   padding: 0.75rem 0;
   border-bottom: 0.0625rem solid #E6E8EA;
 }
 
-.emotion-91:last-child {
+.emotion-92:last-child {
   padding-bottom: 0.25rem;
   border: 0;
 }
 
-.emotion-93 {
+.emotion-94 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -4775,40 +4854,40 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-93 {
+  .emotion-94 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-93 {
+  .emotion-94 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-93:hover,
-.emotion-93:focus {
+.emotion-94:hover,
+.emotion-94:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-color: #B80000;
 }
 
-.emotion-135 {
+.emotion-136 {
   position: absolute;
   width: calc(100vw - 0.8rem);
   inset-inline-start: 0;
 }
 
 @media (min-width: 1041px) {
-  .emotion-135 {
+  .emotion-136 {
     width: calc(100vw + 0.8rem);
     inset-inline-start: calc(-1 * (100vw - 1014px) / 2);
   }
 }
 
-.emotion-135::after {
+.emotion-136::after {
   content: '';
   position: absolute;
   inset-block-end: 0;
@@ -4818,500 +4897,505 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 }
 
 @media (min-width: 1008px) {
-  .emotion-135 {
+  .emotion-136 {
     display: none;
   }
 }
 
-<header
-  role="banner"
+<div
+  aria-live="polite"
+  class="emotion-0"
 >
-  <div>
-    <div
-      class="emotion-0 emotion-1"
-    >
+  <header
+    role="banner"
+  >
+    <div>
       <div
-        class="emotion-2 emotion-3"
-        dir="ltr"
+        class="emotion-1 emotion-2"
       >
         <div
-          class="emotion-4 emotion-5"
+          class="emotion-3 emotion-4"
           dir="ltr"
         >
-          <h2
-            class="emotion-6 emotion-7"
-            dir="ltr"
-            tabindex="-1"
-          >
-            Let us know you agree to cookies
-          </h2>
-          <p
-            class="emotion-8 emotion-9"
+          <div
+            class="emotion-5 emotion-6"
             dir="ltr"
           >
-            We use 
-            <a
-              class="focusIndicatorReducedWidth"
-              href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
+            <h2
+              class="emotion-7 emotion-8"
+              dir="ltr"
+              tabindex="-1"
             >
-              cookies
-            </a>
-             to give you the best online experience. Please let us know if you agree to all of these cookies.
-          </p>
-          <ul
-            class="emotion-10 emotion-11"
-            dir="ltr"
-            role="list"
-          >
-            <li
-              class="emotion-12 emotion-13"
+              Let us know you agree to cookies
+            </h2>
+            <p
+              class="emotion-9 emotion-10"
               dir="ltr"
             >
-              <button
-                data-cookie-banner="accept"
-                type="button"
+              We use 
+              <a
+                class="focusIndicatorReducedWidth"
+                href="https://www.bbc.co.uk/usingthebbc/cookies/what-do-i-need-to-know-about-cookies/"
               >
-                Yes, I agree
-              </button>
-            </li>
-            <li
-              class="emotion-12 emotion-13"
+                cookies
+              </a>
+               to give you the best online experience. Please let us know if you agree to all of these cookies.
+            </p>
+            <ul
+              class="emotion-11 emotion-12"
               dir="ltr"
+              role="list"
             >
-              <span>
-                <a
-                  data-cookie-banner="reject"
-                  href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+              <li
+                class="emotion-13 emotion-14"
+                dir="ltr"
+              >
+                <button
+                  data-cookie-banner="accept"
+                  type="button"
                 >
-                  No, take me to settings
-                </a>
-              </span>
-            </li>
-          </ul>
+                  Yes, I agree
+                </button>
+              </li>
+              <li
+                class="emotion-13 emotion-14"
+                dir="ltr"
+              >
+                <span>
+                  <a
+                    data-cookie-banner="reject"
+                    href="https://www.bbc.co.uk/usingthebbc/cookies/how-can-i-change-my-bbc-cookie-settings/"
+                  >
+                    No, take me to settings
+                  </a>
+                </span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="emotion-16 emotion-17 emotion-18"
-    >
       <div
-        class="emotion-19 emotion-20"
+        class="emotion-17 emotion-18 emotion-19"
       >
-        <a
-          aria-labelledby="BrandLink-topPage"
-          class="focusIndicatorRemove emotion-21 emotion-22"
-          href="/news"
-          id="topPage"
+        <div
+          class="emotion-20 emotion-21"
         >
-          <svg
-            aria-hidden="true"
-            class="emotion-23 emotion-24"
-            focusable="false"
-            height="32"
-            id="brandSvgHeader"
-            viewBox="0 0 980 142"
-            xmlns="http://www.w3.org/2000/svg"
+          <a
+            aria-labelledby="BrandLink-topPage"
+            class="focusIndicatorRemove emotion-22 emotion-23"
+            href="/news"
+            id="topPage"
           >
-            <g
-              fill-rule="evenodd"
-              stroke="#000"
-              stroke-width=".335"
-              style="stroke: #fff;"
+            <svg
+              aria-hidden="true"
+              class="emotion-24 emotion-25"
+              focusable="false"
+              height="32"
+              id="brandSvgHeader"
+              viewBox="0 0 980 142"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
-              />
-            </g>
-          </svg>
-          <span
-            class="emotion-25"
-            id="BrandLink-topPage"
+              <g
+                fill-rule="evenodd"
+                stroke="#000"
+                stroke-width=".335"
+                style="stroke: #fff;"
+              >
+                <path
+                  d="M0 0v141.732h141.732V0Zm98.839 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787H40.571V31.004h29.92q13.224 0 20.489 5.296 7.261 5.296 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.186 20.186 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.272-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H56.724v19.847h12.249q6.287 0 9.594-2.732Zm-7.534 15.22H56.724v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927ZM177.166 0v141.732h141.732V0Zm98.838 100.024a23.16 23.16 0 0 1-10.352 7.917 42.088 42.088 0 0 1-16.153 2.787h-31.763V31.004h29.92q13.224 0 20.489 5.296 7.261 5.298 7.263 15.22a18.29 18.29 0 0 1-2.602 9.868 17.917 17.917 0 0 1-7.697 6.634 21.248 21.248 0 0 1 10.786 7.415 20.187 20.187 0 0 1 3.74 12.32 20.663 20.663 0 0 1-3.631 12.267Zm-20.271-38.97a9.358 9.358 0 0 0 3.307-7.638q0-9.476-12.901-9.477H233.89v19.847h12.249q6.287 0 9.594-2.732Zm-7.535 15.22h-14.309v21.52h14.093q7.261 0 11.166-2.732a9.01 9.01 0 0 0 3.903-7.861q-.001-10.926-14.853-10.927Zm106.133 65.459h141.732V0H354.331Zm101.793-36.057a46.238 46.238 0 0 1-11.478 4.316 58.045 58.045 0 0 1-13.729 1.585 50.05 50.05 0 0 1-17.217-2.787 35.175 35.175 0 0 1-12.941-8.033 34.802 34.802 0 0 1-8.102-12.842 48.987 48.987 0 0 1-2.814-17.104 45.738 45.738 0 0 1 2.926-16.776 35.83 35.83 0 0 1 8.44-12.842 37.18 37.18 0 0 1 13.222-8.197 49.66 49.66 0 0 1 17.274-2.842 55.607 55.607 0 0 1 12.547 1.366 46.64 46.64 0 0 1 10.972 3.989v15.519a36.756 36.756 0 0 0-10.016-4.645 40.183 40.183 0 0 0-11.365-1.585 29.66 29.66 0 0 0-14.01 3.06 20.959 20.959 0 0 0-8.89 8.853 29.58 29.58 0 0 0-3.094 14.098 30.845 30.845 0 0 0 2.982 14.154 20.367 20.367 0 0 0 8.664 8.907 28.727 28.727 0 0 0 13.785 3.06 42.724 42.724 0 0 0 22.844-6.448Zm162.072 18.34q-11.596-18.582-23.49-37.242-11.897-18.656-23.49-36.2v73.442h-22.003V17.718h23.192q12.042 17.99 23.713 36.052 11.668 18.063 23.266 36.646V17.718h22.003v106.298Zm44.258-106.298h73.145v19.029h-50.25V59.79h44.601V78.82h-44.601v26.166h53.075v19.03h-75.97Zm177.915 106.298q-5.055-17.987-9.886-35.978-4.833-17.987-9.441-35.978-4.46 17.99-9.217 35.978-4.76 17.99-9.812 35.978H777.78Q770.198 98 763.21 71.386q-6.99-26.61-13.231-53.67h24.976q3.715 20.666 7.88 41.33 4.16 20.668 8.771 40.587 9.959-38.802 18.881-77.456h22.3q4.461 19.032 9.143 37.985 4.683 18.955 9.589 37.836 4.46-19.625 8.623-39.843 4.16-20.216 7.73-40.438h24.531q-6.244 27.06-13.231 53.67-6.99 26.613-14.57 52.629Zm95.37 2.23a78.37 78.37 0 0 1-17.32-1.933 66.24 66.24 0 0 1-16.428-6.096V97.7a63.933 63.933 0 0 0 33.748 9.664q10.109 0 15.387-3.42a10.75 10.75 0 0 0 5.278-9.514 9.755 9.755 0 0 0-2.601-7.211 18.56 18.56 0 0 0-6.913-4.163 99.45 99.45 0 0 0-9.663-2.9 110.65 110.65 0 0 1-15.462-4.756 45.068 45.068 0 0 1-11.299-6.32 23.846 23.846 0 0 1-6.987-8.77 28.942 28.942 0 0 1-2.379-12.265 29.446 29.446 0 0 1 5.129-17.395 32.716 32.716 0 0 1 14.496-11.225q9.366-3.938 22.3-3.94a72.223 72.223 0 0 1 16.651 1.934 67.688 67.688 0 0 1 14.718 5.204v20.219a56.134 56.134 0 0 0-14.792-6.244 63.276 63.276 0 0 0-16.577-2.231q-9.07 0-14.049 3.122a9.935 9.935 0 0 0-4.981 8.92 9.093 9.093 0 0 0 2.379 6.616 17.36 17.36 0 0 0 6.765 4.014q4.383 1.561 10.332 3.048 7.583 1.935 14.124 4.237a45.864 45.864 0 0 1 11.521 5.872 24.459 24.459 0 0 1 7.731 9.069 30.061 30.061 0 0 1 2.75 13.529q0 10.558-5.203 18.063a32.29 32.29 0 0 1-15.016 11.447q-9.813 3.939-23.639 3.94Z"
+                />
+              </g>
+            </svg>
+            <span
+              class="emotion-26"
+              id="BrandLink-topPage"
+            >
+              BBC News
+            </span>
+          </a>
+          <a
+            class="focusIndicatorRemove emotion-27 emotion-28"
+            dir="ltr"
+            href="#content"
           >
-            BBC News
-          </span>
-        </a>
-        <a
-          class="focusIndicatorRemove emotion-26 emotion-27"
-          dir="ltr"
-          href="#content"
-        >
-          <div>
-            Skip to content
-          </div>
-        </a>
+            <div>
+              Skip to content
+            </div>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
-  <nav
-    class="emotion-28 emotion-29"
-    dir="ltr"
-    role="navigation"
-  >
-    <div
-      class="emotion-30 emotion-31"
+    <nav
+      class="emotion-29 emotion-30"
+      dir="ltr"
+      role="navigation"
     >
       <div
-        class="emotion-32 emotion-33"
+        class="emotion-31 emotion-32"
       >
-        <button
-          aria-expanded="false"
-          class="focusIndicatorRemove emotion-34 emotion-35"
-          dir="ltr"
-          type="button"
+        <div
+          class="emotion-33 emotion-34"
         >
-          <svg
-            aria-hidden="true"
-            class="emotion-36 emotion-37"
-            focusable="false"
-            height="2.75rem"
-            viewBox="0 0 44 44"
-            width="2.75rem"
+          <button
+            aria-expanded="false"
+            class="focusIndicatorRemove emotion-35 emotion-36"
+            dir="ltr"
+            type="button"
           >
-            <path
-              d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
-            />
-          </svg>
-          <span
-            class="emotion-25"
+            <svg
+              aria-hidden="true"
+              class="emotion-37 emotion-38"
+              focusable="false"
+              height="2.75rem"
+              viewBox="0 0 44 44"
+              width="2.75rem"
+            >
+              <path
+                d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
+              />
+            </svg>
+            <span
+              class="emotion-26"
+            >
+              Sections
+            </span>
+          </button>
+          <div
+            class="emotion-40 emotion-41"
+            data-e2e="scrollable-nav"
+            dir="ltr"
           >
-            Sections
-          </span>
-        </button>
+            <ul
+              class="emotion-42 emotion-43"
+              role="list"
+            >
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news"
+                >
+                  Home
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/uk"
+                >
+                  UK
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/world"
+                >
+                  World
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/business"
+                >
+                  Business
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/politics"
+                >
+                  Politics
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/technology"
+                >
+                  Tech
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/science_and_environment"
+                >
+                  Science
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/health"
+                >
+                  Health
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/education"
+                >
+                  Family & Education
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/entertainment_and_arts"
+                >
+                  Entertainment & Arts
+                </a>
+              </li>
+              <li
+                class="emotion-44 emotion-45"
+                dir="ltr"
+                role="listitem"
+              >
+                <a
+                  class="focusIndicatorRemove emotion-46 emotion-47"
+                  href="/news/stories"
+                >
+                  Stories
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
         <div
-          class="emotion-39 emotion-40"
-          data-e2e="scrollable-nav"
-          dir="ltr"
+          class="emotion-88 emotion-89"
+          data-e2e="dropdown-nav"
+          height="0"
         >
           <ul
-            class="emotion-41 emotion-42"
+            class="emotion-90 emotion-91"
             role="list"
           >
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-home"
+                class="emotion-94 emotion-95"
                 href="/news"
               >
-                Home
+                <span
+                  id="dropdownNavigation-home"
+                >
+                  Home
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-uk"
+                class="emotion-94 emotion-95"
                 href="/news/uk"
               >
-                UK
+                <span
+                  id="dropdownNavigation-uk"
+                >
+                  UK
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-world"
+                class="emotion-94 emotion-95"
                 href="/news/world"
               >
-                World
+                <span
+                  id="dropdownNavigation-world"
+                >
+                  World
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-business"
+                class="emotion-94 emotion-95"
                 href="/news/business"
               >
-                Business
+                <span
+                  id="dropdownNavigation-business"
+                >
+                  Business
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-politics"
+                class="emotion-94 emotion-95"
                 href="/news/politics"
               >
-                Politics
+                <span
+                  id="dropdownNavigation-politics"
+                >
+                  Politics
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-tech"
+                class="emotion-94 emotion-95"
                 href="/news/technology"
               >
-                Tech
+                <span
+                  id="dropdownNavigation-tech"
+                >
+                  Tech
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-science"
+                class="emotion-94 emotion-95"
                 href="/news/science_and_environment"
               >
-                Science
+                <span
+                  id="dropdownNavigation-science"
+                >
+                  Science
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-health"
+                class="emotion-94 emotion-95"
                 href="/news/health"
               >
-                Health
+                <span
+                  id="dropdownNavigation-health"
+                >
+                  Health
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-family-&-education"
+                class="emotion-94 emotion-95"
                 href="/news/education"
               >
-                Family & Education
+                <span
+                  id="dropdownNavigation-family-&-education"
+                >
+                  Family & Education
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-entertainment-&-arts"
+                class="emotion-94 emotion-95"
                 href="/news/entertainment_and_arts"
               >
-                Entertainment & Arts
+                <span
+                  id="dropdownNavigation-entertainment-&-arts"
+                >
+                  Entertainment & Arts
+                </span>
               </a>
             </li>
             <li
-              class="emotion-43 emotion-44"
-              dir="ltr"
+              class="emotion-92 emotion-93"
               role="listitem"
             >
               <a
-                class="focusIndicatorRemove emotion-45 emotion-46"
+                aria-labelledby="dropdownNavigation-stories"
+                class="emotion-94 emotion-95"
                 href="/news/stories"
               >
-                Stories
+                <span
+                  id="dropdownNavigation-stories"
+                >
+                  Stories
+                </span>
               </a>
             </li>
           </ul>
         </div>
+        <div
+          class="emotion-136 emotion-137"
+        />
       </div>
-      <div
-        class="emotion-87 emotion-88"
-        data-e2e="dropdown-nav"
-        height="0"
-      >
-        <ul
-          class="emotion-89 emotion-90"
-          role="list"
-        >
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-home"
-              class="emotion-93 emotion-94"
-              href="/news"
-            >
-              <span
-                id="dropdownNavigation-home"
-              >
-                Home
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-uk"
-              class="emotion-93 emotion-94"
-              href="/news/uk"
-            >
-              <span
-                id="dropdownNavigation-uk"
-              >
-                UK
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-world"
-              class="emotion-93 emotion-94"
-              href="/news/world"
-            >
-              <span
-                id="dropdownNavigation-world"
-              >
-                World
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-business"
-              class="emotion-93 emotion-94"
-              href="/news/business"
-            >
-              <span
-                id="dropdownNavigation-business"
-              >
-                Business
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-politics"
-              class="emotion-93 emotion-94"
-              href="/news/politics"
-            >
-              <span
-                id="dropdownNavigation-politics"
-              >
-                Politics
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-tech"
-              class="emotion-93 emotion-94"
-              href="/news/technology"
-            >
-              <span
-                id="dropdownNavigation-tech"
-              >
-                Tech
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-science"
-              class="emotion-93 emotion-94"
-              href="/news/science_and_environment"
-            >
-              <span
-                id="dropdownNavigation-science"
-              >
-                Science
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-health"
-              class="emotion-93 emotion-94"
-              href="/news/health"
-            >
-              <span
-                id="dropdownNavigation-health"
-              >
-                Health
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-family-&-education"
-              class="emotion-93 emotion-94"
-              href="/news/education"
-            >
-              <span
-                id="dropdownNavigation-family-&-education"
-              >
-                Family & Education
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-entertainment-&-arts"
-              class="emotion-93 emotion-94"
-              href="/news/entertainment_and_arts"
-            >
-              <span
-                id="dropdownNavigation-entertainment-&-arts"
-              >
-                Entertainment & Arts
-              </span>
-            </a>
-          </li>
-          <li
-            class="emotion-91 emotion-92"
-            role="listitem"
-          >
-            <a
-              aria-labelledby="dropdownNavigation-stories"
-              class="emotion-93 emotion-94"
-              href="/news/stories"
-            >
-              <span
-                id="dropdownNavigation-stories"
-              >
-                Stories
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div
-        class="emotion-135 emotion-136"
-      />
-    </div>
-  </nav>
-</header>
+    </nav>
+  </header>
+</div>
 `;
diff --git a/src/app/legacy/containers/Header/index.jsx b/src/app/legacy/containers/Header/index.jsx
index c46187c025e..5468fda5870 100644
--- a/src/app/legacy/containers/Header/index.jsx
+++ b/src/app/legacy/containers/Header/index.jsx
@@ -15,6 +15,7 @@ import { ServiceContext } from '../../../contexts/ServiceContext';
 import ConsentBanner from '../ConsentBanner';
 import NavigationContainer from '../Navigation';
 import BrandContainer from '../Brand';
+import StickyishNav from './StickyishNav';
 
 const Header = ({ brandRef, borderBottom, skipLink, scriptLink, linkId }) => {
   const [showConsentBanner, setShowConsentBanner] = useState(true);
@@ -92,25 +93,27 @@ const HeaderContainer = ({ propsForTopBarOJComponent }) => {
   if (isApp) return null;
 
   return (
-    <header role="banner" lang={serviceLang}>
-      {isAmp ? (
-        <Header
-          linkId="brandLink"
-          skipLink={skipLink}
-          scriptLink={shouldRenderScriptSwitch && <ScriptLink />}
+    <StickyishNav>
+      <header role="banner" lang={serviceLang}>
+        {isAmp ? (
+          <Header
+            linkId="brandLink"
+            skipLink={skipLink}
+            scriptLink={shouldRenderScriptSwitch && <ScriptLink />}
+          />
+        ) : (
+          <Header
+            brandRef={brandRef}
+            skipLink={skipLink}
+            scriptLink={shouldRenderScriptSwitch && <ScriptLink />}
+          />
+        )}
+        {isLite && <LiteSiteSummary />}
+        <NavigationContainer
+          propsForTopBarOJComponent={propsForTopBarOJComponent}
         />
-      ) : (
-        <Header
-          brandRef={brandRef}
-          skipLink={skipLink}
-          scriptLink={shouldRenderScriptSwitch && <ScriptLink />}
-        />
-      )}
-      {isLite && <LiteSiteSummary />}
-      <NavigationContainer
-        propsForTopBarOJComponent={propsForTopBarOJComponent}
-      />
-    </header>
+      </header>
+    </StickyishNav>
   );
 };
 
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 9610c828c45..e9718c9e478 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -1,4 +1,4 @@
-import { use, useState } from 'react';
+import { use, useState, useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import useToggle from '#hooks/useToggle';
 import { singleTextBlock } from '#app/models/blocks';
@@ -45,6 +45,7 @@ import ArticleLinksBlock from '#app/components/ArticleLinksBlock';
 import Recommendations from '#app/components/Recommendations';
 import ReadTimeArticle from '#app/components/ReadTime';
 import PWAPromotionalBanner from '#app/components/PWAPromotionalBanner';
+import ReadingProgressBar from './ReadingProgressBar'
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
@@ -177,6 +178,7 @@ const getContinueReadingButton =
 
 const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const [showAllContent, setShowAllContent] = useState(false);
+  const mainRef = useRef<HTMLElement | null>(null);
   const { isApp, isAmp, isLite } = use(RequestContext);
   const {
     articleAuthor,
@@ -376,7 +378,12 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       <ElectionBanner aboutTags={aboutTags} taggings={taggings} />
       <div css={styles.grid}>
         <div css={!isPGL ? styles.primaryColumn : styles.pglColumn}>
-          <main css={styles.mainContent} role="main">
+          <ReadingProgressBar
+            targetRef={mainRef}
+            showAllContent={showAllContent}
+            hasContinueReadingButton={showContinueReadingButton}
+          />
+          <main ref={mainRef} css={styles.mainContent} role="main">
             <Blocks
               blocks={articleBlocks}
               componentsToRender={componentsToRender}
diff --git a/src/app/pages/ArticlePage/ReadingProgressBar/index.tsx b/src/app/pages/ArticlePage/ReadingProgressBar/index.tsx
new file mode 100644
index 00000000000..558dec81c98
--- /dev/null
+++ b/src/app/pages/ArticlePage/ReadingProgressBar/index.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState, RefObject } from 'react';
+import { useTheme, css } from '@emotion/react';
+
+type ReadingProgressBarProps = {
+  targetRef: RefObject<HTMLElement | null>;
+  showAllContent?: boolean;
+  hasContinueReadingButton?: boolean;
+};
+
+const barWrapperStyles = css({
+  position: 'sticky',
+  top: 0,
+  left: 0,
+  width: '100%',
+  zIndex: 9999,
+  background: 'transparent',
+  height: 4,
+});
+
+const progressBarStyles = (palette, width: number) =>
+  css({
+    display: 'block',
+    height: 4,
+    width: `${width}%`,
+    background: palette.POSTBOX,
+    borderRadius: 2,
+    transition: 'width 0.06s ease-in',
+  });
+
+const ReadingProgressBar = ({
+  targetRef,
+  showAllContent = true,
+  hasContinueReadingButton = false,
+}: ReadingProgressBarProps) => {
+  // Initialises state to track the progress percentage.
+  const [progress, setProgress] = useState(0);
+  const { palette } = useTheme();
+  const ticking = useRef(false);
+
+  useEffect(() => {
+    // Defines a function to calculate progress, exiting if the ref is not set.
+    const handleScroll = () => {
+      if (!targetRef.current) return;
+
+      // getBoundingClientRect is a DOM method that returns the size and position of an element relative to the viewport.
+      // it provides an object with properties like top, right, bottom, left, width, and height
+      // in this component it is used to measure the article's height and position
+      const rect = targetRef.current.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const articleHeight = rect.height;
+      const totalScrollable = articleHeight - windowHeight;
+
+      // Calculates the article’s position and the total scrollable distance.
+      // If there is a continue reading button and content is not expanded, keep progress at 0
+      if (hasContinueReadingButton && !showAllContent) {
+        setProgress(0);
+        ticking.current = false;
+        return;
+      }
+      // If the article is collapsed and has a continue reading button, progress stays at 0.
+      const scrolled = Math.min(
+        Math.max(-rect.top, 0),
+        totalScrollable > 0 ? totalScrollable : 1,
+      );
+      // Calculates the progress percentage, ensuring it never exceeds 100%.
+      const percent =
+        totalScrollable > 0
+          ? Math.min((scrolled / totalScrollable) * 100, 100)
+          : 0;
+      // Updates the progress state and resets the ticking flag.
+      setProgress(percent);
+      ticking.current = false;
+    };
+    // this is called whenver a scroll or resize event happens. It checks if an aniimation frame is already scheduled (ticking.current)
+    // if not, it schedules handleScroll to tun on the next animation frame using window.requestAnimationFrame
+    // it then sets ticking.curent to true to prevent scheduling another frame before the current one runs
+    // this approach means that handleScroll tuns at most once per animation frame even if many
+    // scroll/resize events fire rapidly
+    const onScroll = () => {
+      if (!ticking.current) {
+        window.requestAnimationFrame(handleScroll);
+        ticking.current = true;
+      }
+    };
+
+    // Adds event listeners for scroll and resize, and triggers an initial calculation.
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+    onScroll();
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [targetRef, showAllContent, hasContinueReadingButton]);
+
+  return (
+    <div css={barWrapperStyles} aria-hidden>
+      <span
+        css={progressBarStyles(palette, progress)}
+        data-testid="article-progress-bar"
+      />
+    </div>
+  );
+};
+
+export default ReadingProgressBar;
diff --git a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
index dadbd758e1a..91519ac1031 100644
--- a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
@@ -32,79 +32,100 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 .emotion-3 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999;
+  background: transparent;
+  height: 4px;
+}
+
+.emotion-4 {
+  display: block;
+  height: 4px;
+  width: 0%;
+  background: #B80000;
+  border-radius: 2px;
+  -webkit-transition: width 0.06s ease-in;
+  transition: width 0.06s ease-in;
+}
+
+.emotion-5 {
   padding-bottom: 1.5rem;
 }
 
-.emotion-3 [id="continue-reading-button"]~* {
+.emotion-5 [id="continue-reading-button"]~* {
   display: none;
 }
 
-.no-js .emotion-3 [id="continue-reading-button"]~*,
-.is-opera-mini .emotion-3 [id="continue-reading-button"]~* {
+.no-js .emotion-5 [id="continue-reading-button"]~*,
+.is-opera-mini .emotion-5 [id="continue-reading-button"]~* {
   display: block;
 }
 
 @media (min-width: 63rem) {
-  .emotion-3 [id="continue-reading-button"]~* {
+  .emotion-5 [id="continue-reading-button"]~* {
     display: block;
   }
 }
 
-.emotion-3 [data-first-hidden-element="true"]:focus-visible {
+.emotion-5 [data-first-hidden-element="true"]:focus-visible {
   outline: 0.1875rem solid #000000;
   box-shadow: 0 0 0 0.1875rem #FFFFFF;
   outline-offset: 0.1875rem;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     margin-left: 16.666666666666668%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-4 {
+  .emotion-6 {
     margin-left: 33.333333333333336%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-4 {
+  .emotion-6 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -113,7 +134,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -122,7 +143,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -131,7 +152,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -140,7 +161,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-start: 2;
@@ -148,7 +169,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 80rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(12, 1fr);
       grid-column-end: span 12;
       grid-column-start: 5;
@@ -156,7 +177,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 }
 
-.emotion-6 {
+.emotion-8 {
   font-size: 1.75rem;
   line-height: 2rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -170,78 +191,78 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-6 {
+  .emotion-8 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-8 {
     font-size: 2.75rem;
     line-height: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-8 {
     padding: 2.5rem 0;
   }
 }
 
-.emotion-6:focus {
+.emotion-8:focus {
   outline: none;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     margin-left: 20%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-8 {
+  .emotion-10 {
     margin-left: 40%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-8 {
+  .emotion-10 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -250,7 +271,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -259,7 +280,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -268,7 +289,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       padding: 0 1rem;
@@ -277,7 +298,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       grid-column-start: 2;
@@ -285,7 +306,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 80rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(10, 1fr);
       grid-column-end: span 10;
       grid-column-start: 5;
@@ -293,7 +314,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -305,27 +326,27 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-12 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-12 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-10 {
+  .emotion-12 {
     padding-right: 2.5rem;
   }
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-12 {
+  .emotion-14 {
     margin: 0 0.5rem;
     padding-bottom: 1.5rem;
   }
@@ -333,7 +354,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 
 @media (min-width: 25rem) {
   @media (max-width: 62.9375rem) {
-    .emotion-12 {
+    .emotion-14 {
       margin: 0 1rem;
       padding-bottom: 2rem;
     }
@@ -341,21 +362,21 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-12 {
+  .emotion-14 {
     margin: 0 1rem;
     padding-bottom: 2.5rem;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-12 {
+  .emotion-14 {
     margin: 0 auto;
     padding: 0 1rem 1.5rem;
     max-width: 80rem;
   }
 }
 
-.emotion-13 {
+.emotion-15 {
   position: relative;
   z-index: 0;
   color: #141414;
@@ -363,36 +384,36 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-13 {
+  .emotion-15 {
     margin-top: 1.5rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-13 {
+  .emotion-15 {
     margin-bottom: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-13 {
+  .emotion-15 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-15 {
+.emotion-17 {
   margin: 0;
   padding: 0;
   scroll-margin-top: 1rem;
 }
 
-.emotion-15:focus-visible {
+.emotion-17:focus-visible {
   outline: 0.1875rem solid #000000;
   box-shadow: 0 0 0 0.1875rem #FFFFFF;
   outline-offset: 0.1875rem;
 }
 
-.emotion-17 {
+.emotion-19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -402,7 +423,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   flex-direction: column;
 }
 
-.emotion-19 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -422,7 +443,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-19 {
+  .emotion-21 {
     -webkit-align-items: stretch;
     -webkit-box-align: stretch;
     -ms-flex-align: stretch;
@@ -430,7 +451,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 }
 
-.emotion-21 {
+.emotion-23 {
   font-size: 1.125rem;
   line-height: 1.375rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -450,32 +471,32 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-21 {
+  .emotion-23 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-23 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-23 {
     margin: 0;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-23 {
     padding-right: 1rem;
   }
 }
 
-.emotion-23 {
+.emotion-25 {
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -484,7 +505,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @supports (display: grid) {
-  .emotion-23 {
+  .emotion-25 {
     display: grid;
     position: initial;
     width: initial;
@@ -492,7 +513,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -500,7 +521,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -508,7 +529,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -516,7 +537,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 1rem;
@@ -524,7 +545,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(8, 1fr);
       grid-column-end: span 8;
       grid-column-gap: 1rem;
@@ -532,7 +553,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   }
 
   @media (min-width: 80rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(20, 1fr);
       grid-column-end: span 20;
       grid-column-gap: 1rem;
@@ -541,24 +562,24 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 80rem) {
-  .emotion-23 {
+  .emotion-25 {
     grid-auto-flow: row;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-25 {
     grid-template-rows: repeat(3, auto);
   }
 }
 
-.emotion-25 {
+.emotion-27 {
   position: relative;
   padding-bottom: 1.5rem;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -566,7 +587,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -574,7 +595,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -582,7 +603,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(50%);
     display: inline-block;
     vertical-align: top;
@@ -590,7 +611,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(50%);
     display: inline-block;
     vertical-align: top;
@@ -598,7 +619,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 80rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(20%);
     display: inline-block;
     vertical-align: top;
@@ -606,56 +627,56 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @supports (display: grid) {
-  .emotion-25 {
+  .emotion-27 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(3, 1fr);
       grid-column-end: span 3;
     }
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(4, 1fr);
       grid-column-end: span 4;
     }
   }
 
   @media (min-width: 80rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(4, 1fr);
       grid-column-end: span 4;
     }
   }
 }
 
-.emotion-27 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -668,50 +689,50 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 2rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 2rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-28 {
+    .emotion-30 {
       min-width: 2rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 2rem;
   }
 }
 
-.emotion-29 {
+.emotion-31 {
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -724,32 +745,32 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-29 {
+  .emotion-31 {
     font-size: 2.5rem;
     line-height: 2.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-29 {
+  .emotion-31 {
     font-size: 3.5rem;
     line-height: 3.75rem;
   }
 }
 
-.emotion-30 {
+.emotion-32 {
   padding-top: 0.375rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-30 {
+  .emotion-32 {
     padding-right: 0;
   }
 }
 
-.emotion-31 {
+.emotion-33 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -763,26 +784,26 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-31 {
+  .emotion-33 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-31 {
+  .emotion-33 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-31:hover,
-.emotion-31:focus {
+.emotion-33:hover,
+.emotion-33:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-31:before {
+.emotion-33:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -795,31 +816,31 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 25rem) {
-  .emotion-31 {
+  .emotion-33 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 
   @media (min-width: 20rem) and (max-width: 37.4375rem) {
-    .emotion-31 {
+    .emotion-33 {
       font-size: 1.125rem;
       line-height: 1.375rem;
     }
   }
 
   @media (min-width: 37.5rem) {
-    .emotion-31 {
+    .emotion-33 {
       font-size: 1.25rem;
       line-height: 1.5rem;
     }
   }
 }
 
-.emotion-32 {
+.emotion-34 {
   padding-top: 0.5rem;
 }
 
-.emotion-33 {
+.emotion-35 {
   font-size: 0.875rem;
   line-height: 1.125rem;
   color: #545658;
@@ -830,14 +851,14 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-33 {
+  .emotion-35 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-33 {
+  .emotion-35 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
@@ -859,16 +880,25 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
       <div
         class="emotion-2"
       >
-        <main
+        <div
+          aria-hidden="true"
           class="emotion-3"
+        >
+          <span
+            class="emotion-4"
+            data-testid="article-progress-bar"
+          />
+        </div>
+        <main
+          class="emotion-5"
           role="main"
         >
           <div
-            class="emotion-4 emotion-5"
+            class="emotion-6 emotion-7"
             dir="ltr"
           >
             <h1
-              class="article-heading emotion-6 emotion-7"
+              class="article-heading emotion-8 emotion-9"
               id="content"
               tabindex="-1"
             >
@@ -876,11 +906,11 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
             </h1>
           </div>
           <div
-            class="emotion-8 emotion-5"
+            class="emotion-10 emotion-7"
             dir="ltr"
           >
             <p
-              class="emotion-10 emotion-11"
+              class="emotion-12 emotion-13"
               dir="ltr"
             >
               A paragraph in Pidgin.
@@ -891,27 +921,27 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
     </div>
     <section
       aria-labelledby="Most-Read"
-      class="emotion-12"
+      class="emotion-14"
       data-e2e="most-read"
       data-testid="most-read"
       role="region"
     >
       <div
-        class="emotion-13 emotion-14"
+        class="emotion-15 emotion-16"
       >
         <h2
-          class="emotion-15 emotion-16"
+          class="emotion-17 emotion-18"
           id="section-label-heading-Most-Read"
           tabindex="-1"
         >
           <span
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
           >
             <span
-              class="emotion-19 emotion-20"
+              class="emotion-21 emotion-22"
             >
               <span
-                class="emotion-21 emotion-22"
+                class="emotion-23 emotion-24"
                 dir="ltr"
                 id="Most-Read"
               >
@@ -922,43 +952,43 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
         </h2>
       </div>
       <ol
-        class="emotion-23 emotion-5"
+        class="emotion-25 emotion-7"
         dir="ltr"
         role="list"
       >
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-28"
+              class="emotion-30"
               dir="ltr"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 1
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="ltr"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/pidgin/articles/cz5kkgv41v0o"
               >
                 Teams wey qualify for Afcon 2023 and how things stand for each group
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-19"
                 >
                   De one we dem update for: 19th June 2023
@@ -968,38 +998,38 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-28"
+              class="emotion-30"
               dir="ltr"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 2
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="ltr"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/pidgin/articles/czd44wvly0qo"
               >
                 'We dey hear gospel songs den screaming' - Woman tok of Uganda school attack 
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-19"
                 >
                   De one we dem update for: 19th June 2023
@@ -1009,38 +1039,38 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-28"
+              class="emotion-30"
               dir="ltr"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 3
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="ltr"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/pidgin/articles/cgr6g81j2g8o"
               >
                 Super Eagles qualify for Nations Cup afta beating Sierra Leone for Monrovia
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-18"
                 >
                   De one we dem update for: 18th June 2023
@@ -1050,38 +1080,38 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-28"
+              class="emotion-30"
               dir="ltr"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 4
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="ltr"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/pidgin/articles/cx047w4gxqzo"
               >
                 Forbes top ten list of highest paid athletes for 2023 and wetin dem earn
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-05-03"
                 >
                   De one we dem update for: 3rd May 2023
@@ -1091,38 +1121,38 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-28"
+              class="emotion-30"
               dir="ltr"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 5
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="ltr"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="/pidgin/65817572"
               >
                 Tins to sabi about 2023 Sierra Leone general election
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-18"
                 >
                   De one we dem update for: 18th June 2023
@@ -1169,79 +1199,100 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 .emotion-3 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999;
+  background: transparent;
+  height: 4px;
+}
+
+.emotion-4 {
+  display: block;
+  height: 4px;
+  width: 0%;
+  background: #B80000;
+  border-radius: 2px;
+  -webkit-transition: width 0.06s ease-in;
+  transition: width 0.06s ease-in;
+}
+
+.emotion-5 {
   padding-bottom: 1.5rem;
 }
 
-.emotion-3 [id="continue-reading-button"]~* {
+.emotion-5 [id="continue-reading-button"]~* {
   display: none;
 }
 
-.no-js .emotion-3 [id="continue-reading-button"]~*,
-.is-opera-mini .emotion-3 [id="continue-reading-button"]~* {
+.no-js .emotion-5 [id="continue-reading-button"]~*,
+.is-opera-mini .emotion-5 [id="continue-reading-button"]~* {
   display: block;
 }
 
 @media (min-width: 63rem) {
-  .emotion-3 [id="continue-reading-button"]~* {
+  .emotion-5 [id="continue-reading-button"]~* {
     display: block;
   }
 }
 
-.emotion-3 [data-first-hidden-element="true"]:focus-visible {
+.emotion-5 [data-first-hidden-element="true"]:focus-visible {
   outline: 0.1875rem solid #000000;
   box-shadow: 0 0 0 0.1875rem #FFFFFF;
   outline-offset: 0.1875rem;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     margin-left: 16.666666666666668%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-4 {
+  .emotion-6 {
     margin-left: 33.333333333333336%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-4 {
+  .emotion-6 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -1250,7 +1301,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -1259,7 +1310,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -1268,7 +1319,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -1277,7 +1328,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-start: 2;
@@ -1285,7 +1336,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 80rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(12, 1fr);
       grid-column-end: span 12;
       grid-column-start: 5;
@@ -1293,7 +1344,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 }
 
-.emotion-6 {
+.emotion-8 {
   font-size: 1.75rem;
   line-height: 2rem;
   font-family: ReithSerif,Helvetica,Arial,sans-serif;
@@ -1307,78 +1358,78 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-6 {
+  .emotion-8 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-8 {
     font-size: 2.75rem;
     line-height: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-8 {
     padding: 2.5rem 0;
   }
 }
 
-.emotion-6:focus {
+.emotion-8:focus {
   outline: none;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     margin-left: 20%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-8 {
+  .emotion-10 {
     margin-left: 40%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-8 {
+  .emotion-10 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -1387,7 +1438,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -1396,7 +1447,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -1405,7 +1456,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       padding: 0 1rem;
@@ -1414,7 +1465,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       grid-column-start: 2;
@@ -1422,7 +1473,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 80rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(10, 1fr);
       grid-column-end: span 10;
       grid-column-start: 5;
@@ -1430,7 +1481,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -1442,26 +1493,26 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-12 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-12 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-10 {
+  .emotion-12 {
     padding-right: 2.5rem;
   }
 }
 
-.emotion-12 {
+.emotion-14 {
   max-width: 100%;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1469,26 +1520,26 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-12 {
+  .emotion-14 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-12 {
+  .emotion-14 {
     padding-left: 0;
     padding-right: 0;
   }
 }
 
-.emotion-13 {
+.emotion-15 {
   margin: 0;
   padding-bottom: 1.5rem;
   width: 100%;
 }
 
-.emotion-14 {
+.emotion-16 {
   position: relative;
   height: 0;
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
@@ -1501,27 +1552,27 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-14 {
+  .emotion-16 {
     -webkit-background-size: 77px 22px;
     background-size: 77px 22px;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-14 {
+  .emotion-16 {
     -webkit-background-size: 93px 27px;
     background-size: 93px 27px;
   }
 }
 
-.emotion-15 {
+.emotion-17 {
   width: 100%;
   object-fit: cover;
   height: auto;
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-16 {
+  .emotion-18 {
     margin: 0 0.5rem;
     padding-bottom: 1.5rem;
   }
@@ -1529,7 +1580,7 @@ exports[`Article Page should render a news article correctly 1`] = `
 
 @media (min-width: 25rem) {
   @media (max-width: 62.9375rem) {
-    .emotion-16 {
+    .emotion-18 {
       margin: 0 1rem;
       padding-bottom: 2rem;
     }
@@ -1537,21 +1588,21 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-16 {
+  .emotion-18 {
     margin: 0 1rem;
     padding-bottom: 2.5rem;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-16 {
+  .emotion-18 {
     margin: 0 auto;
     padding: 0 1rem 1.5rem;
     max-width: 80rem;
   }
 }
 
-.emotion-17 {
+.emotion-19 {
   position: relative;
   z-index: 0;
   color: #141414;
@@ -1559,36 +1610,36 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-17 {
+  .emotion-19 {
     margin-top: 1.5rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-17 {
+  .emotion-19 {
     margin-bottom: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-17 {
+  .emotion-19 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-19 {
+.emotion-21 {
   margin: 0;
   padding: 0;
   scroll-margin-top: 1rem;
 }
 
-.emotion-19:focus-visible {
+.emotion-21:focus-visible {
   outline: 0.1875rem solid #000000;
   box-shadow: 0 0 0 0.1875rem #FFFFFF;
   outline-offset: 0.1875rem;
 }
 
-.emotion-21 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1598,7 +1649,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   flex-direction: column;
 }
 
-.emotion-23 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1618,7 +1669,7 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-25 {
     -webkit-align-items: stretch;
     -webkit-box-align: stretch;
     -ms-flex-align: stretch;
@@ -1626,7 +1677,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 }
 
-.emotion-25 {
+.emotion-27 {
   font-size: 1.125rem;
   line-height: 1.375rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -1646,32 +1697,32 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-25 {
+  .emotion-27 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-25 {
+  .emotion-27 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-25 {
+  .emotion-27 {
     margin: 0;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-25 {
+  .emotion-27 {
     padding-right: 1rem;
   }
 }
 
-.emotion-27 {
+.emotion-29 {
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -1680,7 +1731,7 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @supports (display: grid) {
-  .emotion-27 {
+  .emotion-29 {
     display: grid;
     position: initial;
     width: initial;
@@ -1688,7 +1739,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-27 {
+    .emotion-29 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -1696,7 +1747,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-27 {
+    .emotion-29 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -1704,7 +1755,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-27 {
+    .emotion-29 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -1712,7 +1763,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-27 {
+    .emotion-29 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 1rem;
@@ -1720,7 +1771,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-27 {
+    .emotion-29 {
       grid-template-columns: repeat(8, 1fr);
       grid-column-end: span 8;
       grid-column-gap: 1rem;
@@ -1728,7 +1779,7 @@ exports[`Article Page should render a news article correctly 1`] = `
   }
 
   @media (min-width: 80rem) {
-    .emotion-27 {
+    .emotion-29 {
       grid-template-columns: repeat(20, 1fr);
       grid-column-end: span 20;
       grid-column-gap: 1rem;
@@ -1737,24 +1788,24 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 80rem) {
-  .emotion-27 {
+  .emotion-29 {
     grid-auto-flow: row;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-27 {
+  .emotion-29 {
     grid-template-rows: repeat(5, auto);
   }
 }
 
-.emotion-29 {
+.emotion-31 {
   position: relative;
   padding-bottom: 1.5rem;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-29 {
+  .emotion-31 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -1762,7 +1813,7 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-29 {
+  .emotion-31 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -1770,7 +1821,7 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-29 {
+  .emotion-31 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -1778,7 +1829,7 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-29 {
+  .emotion-31 {
     width: calc(50%);
     display: inline-block;
     vertical-align: top;
@@ -1786,7 +1837,7 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-29 {
+  .emotion-31 {
     width: calc(50%);
     display: inline-block;
     vertical-align: top;
@@ -1794,7 +1845,7 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 80rem) {
-  .emotion-29 {
+  .emotion-31 {
     width: calc(20%);
     display: inline-block;
     vertical-align: top;
@@ -1802,56 +1853,56 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @supports (display: grid) {
-  .emotion-29 {
+  .emotion-31 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-29 {
+    .emotion-31 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-29 {
+    .emotion-31 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-29 {
+    .emotion-31 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-29 {
+    .emotion-31 {
       grid-template-columns: repeat(3, 1fr);
       grid-column-end: span 3;
     }
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-29 {
+    .emotion-31 {
       grid-template-columns: repeat(4, 1fr);
       grid-column-end: span 4;
     }
   }
 
   @media (min-width: 80rem) {
-    .emotion-29 {
+    .emotion-31 {
       grid-template-columns: repeat(4, 1fr);
       grid-column-end: span 4;
     }
   }
 }
 
-.emotion-31 {
+.emotion-33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1864,50 +1915,50 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-32 {
+  .emotion-34 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-32 {
+  .emotion-34 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-32 {
+  .emotion-34 {
     min-width: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-32 {
+  .emotion-34 {
     min-width: 4rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-32 {
+  .emotion-34 {
     min-width: 2rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-32 {
+    .emotion-34 {
       min-width: 2rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-32 {
+  .emotion-34 {
     min-width: 2rem;
   }
 }
 
-.emotion-33 {
+.emotion-35 {
   font-family: ReithSerif,Helvetica,Arial,sans-serif;
   font-style: normal;
   font-weight: 300;
@@ -1920,32 +1971,32 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-33 {
+  .emotion-35 {
     font-size: 2.5rem;
     line-height: 2.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-33 {
+  .emotion-35 {
     font-size: 3.5rem;
     line-height: 3.75rem;
   }
 }
 
-.emotion-34 {
+.emotion-36 {
   padding-top: 0.375rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-34 {
+  .emotion-36 {
     padding-right: 0;
   }
 }
 
-.emotion-35 {
+.emotion-37 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSerif,Helvetica,Arial,sans-serif;
@@ -1959,26 +2010,26 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-35 {
+  .emotion-37 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-35 {
+  .emotion-37 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-35:hover,
-.emotion-35:focus {
+.emotion-37:hover,
+.emotion-37:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-35:before {
+.emotion-37:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -1991,31 +2042,31 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-35 {
+  .emotion-37 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 
   @media (min-width: 20rem) and (max-width: 37.4375rem) {
-    .emotion-35 {
+    .emotion-37 {
       font-size: 1.125rem;
       line-height: 1.375rem;
     }
   }
 
   @media (min-width: 37.5rem) {
-    .emotion-35 {
+    .emotion-37 {
       font-size: 1.25rem;
       line-height: 1.5rem;
     }
   }
 }
 
-.emotion-36 {
+.emotion-38 {
   padding-top: 0.5rem;
 }
 
-.emotion-37 {
+.emotion-39 {
   font-size: 0.875rem;
   line-height: 1.125rem;
   color: #545658;
@@ -2026,235 +2077,235 @@ exports[`Article Page should render a news article correctly 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-37 {
+  .emotion-39 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-37 {
+  .emotion-39 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-42 {
+  .emotion-44 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-42 {
+  .emotion-44 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-42 {
+  .emotion-44 {
     min-width: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-42 {
+  .emotion-44 {
     min-width: 4rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-42 {
+  .emotion-44 {
     min-width: 4rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-42 {
+    .emotion-44 {
       min-width: 2rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-42 {
+  .emotion-44 {
     min-width: 2rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-72 {
+  .emotion-74 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-72 {
+  .emotion-74 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-72 {
+  .emotion-74 {
     min-width: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-72 {
+  .emotion-74 {
     min-width: 4rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-72 {
+  .emotion-74 {
     min-width: 2rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-72 {
+    .emotion-74 {
       min-width: 2rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-72 {
+  .emotion-74 {
     min-width: 4rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-82 {
+  .emotion-84 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-82 {
+  .emotion-84 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-82 {
+  .emotion-84 {
     min-width: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-82 {
+  .emotion-84 {
     min-width: 4rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-82 {
+  .emotion-84 {
     min-width: 4rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-82 {
+    .emotion-84 {
       min-width: 4rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-82 {
+  .emotion-84 {
     min-width: 2rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-92 {
+  .emotion-94 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-92 {
+  .emotion-94 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-92 {
+  .emotion-94 {
     min-width: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-92 {
+  .emotion-94 {
     min-width: 4rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-92 {
+  .emotion-94 {
     min-width: 2rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-92 {
+    .emotion-94 {
       min-width: 4rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-92 {
+  .emotion-94 {
     min-width: 2rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-122 {
+  .emotion-124 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-122 {
+  .emotion-124 {
     min-width: 2.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-122 {
+  .emotion-124 {
     min-width: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-122 {
+  .emotion-124 {
     min-width: 4rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-122 {
+  .emotion-124 {
     min-width: 4rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-122 {
+    .emotion-124 {
       min-width: 4rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-122 {
+  .emotion-124 {
     min-width: 4rem;
   }
 }
@@ -2275,16 +2326,25 @@ exports[`Article Page should render a news article correctly 1`] = `
       <div
         class="emotion-2"
       >
-        <main
+        <div
+          aria-hidden="true"
           class="emotion-3"
+        >
+          <span
+            class="emotion-4"
+            data-testid="article-progress-bar"
+          />
+        </div>
+        <main
+          class="emotion-5"
           role="main"
         >
           <div
-            class="emotion-4 emotion-5"
+            class="emotion-6 emotion-7"
             dir="ltr"
           >
             <h1
-              class="article-heading emotion-6 emotion-7"
+              class="article-heading emotion-8 emotion-9"
               id="content"
               tabindex="-1"
             >
@@ -2292,18 +2352,18 @@ exports[`Article Page should render a news article correctly 1`] = `
             </h1>
           </div>
           <div
-            class="emotion-8 emotion-5"
+            class="emotion-10 emotion-7"
             dir="ltr"
           >
             <p
-              class="emotion-10 emotion-11"
+              class="emotion-12 emotion-13"
               dir="ltr"
             >
               A paragraph.
             </p>
           </div>
           <div
-            class="emotion-12"
+            class="emotion-14"
             data-testid="embed"
           >
             <div
@@ -2328,15 +2388,15 @@ exports[`Article Page should render a news article correctly 1`] = `
             </div>
           </div>
           <figure
-            class="emotion-13"
+            class="emotion-15"
           >
             <div
-              class="emotion-14"
+              class="emotion-16"
               style="padding-bottom: 56.26%;"
             >
               <img
                 alt="Shiroo buddeen waliin"
-                class="emotion-15"
+                class="emotion-17"
                 height="535"
                 loading="lazy"
                 sizes="(min-width: 1008px) 760px, 100vw"
@@ -2352,27 +2412,27 @@ exports[`Article Page should render a news article correctly 1`] = `
     </div>
     <section
       aria-labelledby="Most-Read"
-      class="emotion-16"
+      class="emotion-18"
       data-e2e="most-read"
       data-testid="most-read"
       role="region"
     >
       <div
-        class="emotion-17 emotion-18"
+        class="emotion-19 emotion-20"
       >
         <h2
-          class="emotion-19 emotion-20"
+          class="emotion-21 emotion-22"
           id="section-label-heading-Most-Read"
           tabindex="-1"
         >
           <span
-            class="emotion-21 emotion-22"
+            class="emotion-23 emotion-24"
           >
             <span
-              class="emotion-23 emotion-24"
+              class="emotion-25 emotion-26"
             >
               <span
-                class="emotion-25 emotion-26"
+                class="emotion-27 emotion-28"
                 dir="ltr"
                 id="Most-Read"
               >
@@ -2383,43 +2443,43 @@ exports[`Article Page should render a news article correctly 1`] = `
         </h2>
       </div>
       <ol
-        class="emotion-27 emotion-5"
+        class="emotion-29 emotion-7"
         dir="ltr"
         role="list"
       >
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-32"
+              class="emotion-34"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 1
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/world-us-canada-65981277"
               >
                 Why the oxygen timeline on sub may not be so fixed
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2429,38 +2489,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-42"
+              class="emotion-44"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 2
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/uk-wales-65986742"
               >
                 MasterChef contestant jailed for child abuse images
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2470,38 +2530,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-32"
+              class="emotion-34"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 3
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/business-65981876"
               >
                 Musk and Zuckerberg agree to hold cage fight
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2511,38 +2571,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-42"
+              class="emotion-44"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 4
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/entertainment-arts-65986136"
               >
                 Cindy Beale returns to EastEnders after 25 years
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2552,38 +2612,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-72"
+              class="emotion-74"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 5
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/health-65985838"
               >
                 Mosquito-borne diseases risk increasing in Europe
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2593,38 +2653,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-82"
+              class="emotion-84"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 6
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/uk-scotland-65987986"
               >
                 Teenager guilty of murdering boy at train station
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2634,38 +2694,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-92"
+              class="emotion-94"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 7
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/world-65983001"
               >
                 At least 30 migrants feared dead off Canary Islands
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2675,38 +2735,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-82"
+              class="emotion-84"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 8
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/business-65982981"
               >
                 Bank boss warns interest rate hike hard for many
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2716,38 +2776,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-92"
+              class="emotion-94"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 9
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/world-europe-65982817"
               >
                 Ukraine strikes bridge to Crimea, says Russia
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2757,38 +2817,38 @@ exports[`Article Page should render a news article correctly 1`] = `
           </div>
         </li>
         <li
-          class="emotion-29 emotion-5"
+          class="emotion-31 emotion-7"
           dir="ltr"
           role="listitem"
         >
           <div
-            class="emotion-31"
+            class="emotion-33"
           >
             <div
-              class="emotion-122"
+              class="emotion-124"
               dir="ltr"
             >
               <span
-                class="emotion-33"
+                class="emotion-35"
               >
                 10
               </span>
             </div>
             <div
-              class="emotion-34"
+              class="emotion-36"
               dir="ltr"
             >
               <a
-                class="emotion-35"
+                class="emotion-37"
                 href="/news/world-us-canada-65923956"
               >
                 The woman who wants to end abortion in America
               </a>
               <div
-                class="emotion-36"
+                class="emotion-38"
               >
                 <time
-                  class="emotion-37 emotion-38"
+                  class="emotion-39 emotion-40"
                   datetime="2023-06-22"
                 >
                   Last updated: 22 June 2023
@@ -2835,31 +2895,52 @@ exports[`Article Page should render a news article with headline in the middle c
 }
 
 .emotion-3 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999;
+  background: transparent;
+  height: 4px;
+}
+
+.emotion-4 {
+  display: block;
+  height: 4px;
+  width: 0%;
+  background: #B80000;
+  border-radius: 2px;
+  -webkit-transition: width 0.06s ease-in;
+  transition: width 0.06s ease-in;
+}
+
+.emotion-5 {
   padding-bottom: 1.5rem;
 }
 
-.emotion-3 [id="continue-reading-button"]~* {
+.emotion-5 [id="continue-reading-button"]~* {
   display: none;
 }
 
-.no-js .emotion-3 [id="continue-reading-button"]~*,
-.is-opera-mini .emotion-3 [id="continue-reading-button"]~* {
+.no-js .emotion-5 [id="continue-reading-button"]~*,
+.is-opera-mini .emotion-5 [id="continue-reading-button"]~* {
   display: block;
 }
 
 @media (min-width: 63rem) {
-  .emotion-3 [id="continue-reading-button"]~* {
+  .emotion-5 [id="continue-reading-button"]~* {
     display: block;
   }
 }
 
-.emotion-3 [data-first-hidden-element="true"]:focus-visible {
+.emotion-5 [data-first-hidden-element="true"]:focus-visible {
   outline: 0.1875rem solid #000000;
   box-shadow: 0 0 0 0.1875rem #FFFFFF;
   outline-offset: 0.1875rem;
 }
 
-.emotion-4 {
+.emotion-6 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -2871,54 +2952,54 @@ exports[`Article Page should render a news article with headline in the middle c
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-5 {
+  .emotion-7 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-5 {
+  .emotion-7 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-5 {
+  .emotion-7 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-5 {
+  .emotion-7 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-5 {
+  .emotion-7 {
     margin-left: 20%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-5 {
+  .emotion-7 {
     margin-left: 40%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-5 {
+  .emotion-7 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -2927,7 +3008,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -2936,7 +3017,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -2945,7 +3026,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       padding: 0 1rem;
@@ -2954,7 +3035,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       grid-column-start: 2;
@@ -2962,7 +3043,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 80rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(10, 1fr);
       grid-column-end: span 10;
       grid-column-start: 5;
@@ -2970,7 +3051,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 }
 
-.emotion-7 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -2982,74 +3063,74 @@ exports[`Article Page should render a news article with headline in the middle c
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-7 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-7 {
+  .emotion-9 {
     padding-right: 2.5rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-9 {
+  .emotion-11 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-9 {
+  .emotion-11 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-9 {
+  .emotion-11 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-9 {
+  .emotion-11 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-9 {
+  .emotion-11 {
     margin-left: 16.666666666666668%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-9 {
+  .emotion-11 {
     margin-left: 33.333333333333336%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-9 {
+  .emotion-11 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-9 {
+    .emotion-11 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -3058,7 +3139,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-9 {
+    .emotion-11 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -3067,7 +3148,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-9 {
+    .emotion-11 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -3076,7 +3157,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-9 {
+    .emotion-11 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -3085,7 +3166,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-9 {
+    .emotion-11 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-start: 2;
@@ -3093,7 +3174,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 
   @media (min-width: 80rem) {
-    .emotion-9 {
+    .emotion-11 {
       grid-template-columns: repeat(12, 1fr);
       grid-column-end: span 12;
       grid-column-start: 5;
@@ -3101,7 +3182,7 @@ exports[`Article Page should render a news article with headline in the middle c
   }
 }
 
-.emotion-11 {
+.emotion-13 {
   font-size: 1.75rem;
   line-height: 2rem;
   font-family: ReithSerif,Helvetica,Arial,sans-serif;
@@ -3115,26 +3196,26 @@ exports[`Article Page should render a news article with headline in the middle c
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-11 {
+  .emotion-13 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-11 {
+  .emotion-13 {
     font-size: 2.75rem;
     line-height: 3rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-11 {
+  .emotion-13 {
     padding: 2.5rem 0;
   }
 }
 
-.emotion-11:focus {
+.emotion-13:focus {
   outline: none;
 }
 
@@ -3154,44 +3235,53 @@ exports[`Article Page should render a news article with headline in the middle c
       <div
         class="emotion-2"
       >
-        <main
+        <div
+          aria-hidden="true"
           class="emotion-3"
+        >
+          <span
+            class="emotion-4"
+            data-testid="article-progress-bar"
+          />
+        </div>
+        <main
+          class="emotion-5"
           role="main"
         >
           <h1
-            class="emotion-4"
+            class="emotion-6"
             id="content"
             tabindex="-1"
           >
             SEO Headline
           </h1>
           <div
-            class="emotion-5 emotion-6"
+            class="emotion-7 emotion-8"
             dir="ltr"
           >
             <p
-              class="emotion-7 emotion-8"
+              class="emotion-9 emotion-10"
               dir="ltr"
             >
               Paragraph above headline
             </p>
           </div>
           <div
-            class="emotion-9 emotion-6"
+            class="emotion-11 emotion-8"
             dir="ltr"
           >
             <strong
-              class="article-heading emotion-11 emotion-12"
+              class="article-heading emotion-13 emotion-14"
             >
               Article Headline
             </strong>
           </div>
           <div
-            class="emotion-5 emotion-6"
+            class="emotion-7 emotion-8"
             dir="ltr"
           >
             <p
-              class="emotion-7 emotion-8"
+              class="emotion-9 emotion-10"
               dir="ltr"
             >
               Paragraph below headline
@@ -3236,31 +3326,52 @@ exports[`Article Page should render a news article without headline correctly 1`
 }
 
 .emotion-3 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999;
+  background: transparent;
+  height: 4px;
+}
+
+.emotion-4 {
+  display: block;
+  height: 4px;
+  width: 0%;
+  background: #B80000;
+  border-radius: 2px;
+  -webkit-transition: width 0.06s ease-in;
+  transition: width 0.06s ease-in;
+}
+
+.emotion-5 {
   padding-bottom: 1.5rem;
 }
 
-.emotion-3 [id="continue-reading-button"]~* {
+.emotion-5 [id="continue-reading-button"]~* {
   display: none;
 }
 
-.no-js .emotion-3 [id="continue-reading-button"]~*,
-.is-opera-mini .emotion-3 [id="continue-reading-button"]~* {
+.no-js .emotion-5 [id="continue-reading-button"]~*,
+.is-opera-mini .emotion-5 [id="continue-reading-button"]~* {
   display: block;
 }
 
 @media (min-width: 63rem) {
-  .emotion-3 [id="continue-reading-button"]~* {
+  .emotion-5 [id="continue-reading-button"]~* {
     display: block;
   }
 }
 
-.emotion-3 [data-first-hidden-element="true"]:focus-visible {
+.emotion-5 [data-first-hidden-element="true"]:focus-visible {
   outline: 0.1875rem solid #000000;
   box-shadow: 0 0 0 0.1875rem #FFFFFF;
   outline-offset: 0.1875rem;
 }
 
-.emotion-4 {
+.emotion-6 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -3272,54 +3383,54 @@ exports[`Article Page should render a news article without headline correctly 1`
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-5 {
+  .emotion-7 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-5 {
+  .emotion-7 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-5 {
+  .emotion-7 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-5 {
+  .emotion-7 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-5 {
+  .emotion-7 {
     margin-left: 20%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-5 {
+  .emotion-7 {
     margin-left: 40%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-5 {
+  .emotion-7 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -3328,7 +3439,7 @@ exports[`Article Page should render a news article without headline correctly 1`
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -3337,7 +3448,7 @@ exports[`Article Page should render a news article without headline correctly 1`
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -3346,7 +3457,7 @@ exports[`Article Page should render a news article without headline correctly 1`
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       padding: 0 1rem;
@@ -3355,7 +3466,7 @@ exports[`Article Page should render a news article without headline correctly 1`
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       grid-column-start: 2;
@@ -3363,7 +3474,7 @@ exports[`Article Page should render a news article without headline correctly 1`
   }
 
   @media (min-width: 80rem) {
-    .emotion-5 {
+    .emotion-7 {
       grid-template-columns: repeat(10, 1fr);
       grid-column-end: span 10;
       grid-column-start: 5;
@@ -3371,7 +3482,7 @@ exports[`Article Page should render a news article without headline correctly 1`
   }
 }
 
-.emotion-7 {
+.emotion-9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -3383,21 +3494,21 @@ exports[`Article Page should render a news article without headline correctly 1`
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-7 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-9 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-7 {
+  .emotion-9 {
     padding-right: 2.5rem;
   }
 }
@@ -3418,23 +3529,32 @@ exports[`Article Page should render a news article without headline correctly 1`
       <div
         class="emotion-2"
       >
-        <main
+        <div
+          aria-hidden="true"
           class="emotion-3"
+        >
+          <span
+            class="emotion-4"
+            data-testid="article-progress-bar"
+          />
+        </div>
+        <main
+          class="emotion-5"
           role="main"
         >
           <h1
-            class="emotion-4"
+            class="emotion-6"
             id="content"
             tabindex="-1"
           >
             Article Headline
           </h1>
           <div
-            class="emotion-5 emotion-6"
+            class="emotion-7 emotion-8"
             dir="ltr"
           >
             <p
-              class="emotion-7 emotion-8"
+              class="emotion-9 emotion-10"
               dir="ltr"
             >
               Paragraph 1
@@ -3479,79 +3599,100 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 .emotion-3 {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999;
+  background: transparent;
+  height: 4px;
+}
+
+.emotion-4 {
+  display: block;
+  height: 4px;
+  width: 0%;
+  background: #B80000;
+  border-radius: 2px;
+  -webkit-transition: width 0.06s ease-in;
+  transition: width 0.06s ease-in;
+}
+
+.emotion-5 {
   padding-bottom: 1.5rem;
 }
 
-.emotion-3 [id="continue-reading-button"]~* {
+.emotion-5 [id="continue-reading-button"]~* {
   display: none;
 }
 
-.no-js .emotion-3 [id="continue-reading-button"]~*,
-.is-opera-mini .emotion-3 [id="continue-reading-button"]~* {
+.no-js .emotion-5 [id="continue-reading-button"]~*,
+.is-opera-mini .emotion-5 [id="continue-reading-button"]~* {
   display: block;
 }
 
 @media (min-width: 63rem) {
-  .emotion-3 [id="continue-reading-button"]~* {
+  .emotion-5 [id="continue-reading-button"]~* {
     display: block;
   }
 }
 
-.emotion-3 [data-first-hidden-element="true"]:focus-visible {
+.emotion-5 [data-first-hidden-element="true"]:focus-visible {
   outline: 0.1875rem solid #000000;
   box-shadow: 0 0 0 0.1875rem #FFFFFF;
   outline-offset: 0.1875rem;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 0.5rem;
     margin-right: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 0.5rem;
     margin-right: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 1rem;
     margin-right: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     padding: 0 1rem;
     margin-right: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-4 {
+  .emotion-6 {
     margin-right: 16.666666666666668%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-4 {
+  .emotion-6 {
     margin-right: 33.333333333333336%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-4 {
+  .emotion-6 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -3560,7 +3701,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -3569,7 +3710,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -3578,7 +3719,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -3587,7 +3728,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-start: 2;
@@ -3595,7 +3736,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 80rem) {
-    .emotion-4 {
+    .emotion-6 {
       grid-template-columns: repeat(12, 1fr);
       grid-column-end: span 12;
       grid-column-start: 5;
@@ -3603,7 +3744,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 }
 
-.emotion-6 {
+.emotion-8 {
   font-size: 1.5rem;
   line-height: 2rem;
   font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
@@ -3617,78 +3758,78 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-6 {
+  .emotion-8 {
     font-size: 1.75rem;
     line-height: 2.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-8 {
     font-size: 2.5rem;
     line-height: 3.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-6 {
+  .emotion-8 {
     padding: 2.5rem 0;
   }
 }
 
-.emotion-6:focus {
+.emotion-8:focus {
   outline: none;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0.5rem;
     margin-right: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 0.5rem;
     margin-right: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 1rem;
     margin-right: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     padding: 0 1rem;
     margin-right: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-8 {
+  .emotion-10 {
     margin-right: 20%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-8 {
+  .emotion-10 {
     margin-right: 40%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-8 {
+  .emotion-10 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -3697,7 +3838,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -3706,7 +3847,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -3715,7 +3856,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       padding: 0 1rem;
@@ -3724,7 +3865,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       grid-column-start: 2;
@@ -3732,7 +3873,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 80rem) {
-    .emotion-8 {
+    .emotion-10 {
       grid-template-columns: repeat(10, 1fr);
       grid-column-end: span 10;
       grid-column-start: 5;
@@ -3740,7 +3881,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 }
 
-.emotion-10 {
+.emotion-12 {
   font-size: 0.9375rem;
   line-height: 1.5rem;
   font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
@@ -3752,27 +3893,27 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-12 {
     font-size: 1rem;
     line-height: 1.625rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-12 {
     font-size: 1rem;
     line-height: 1.625rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-10 {
+  .emotion-12 {
     padding-left: 2.5rem;
   }
 }
 
 @media (max-width: 24.9375rem) {
-  .emotion-12 {
+  .emotion-14 {
     margin: 0 0.5rem;
     padding-bottom: 1.5rem;
   }
@@ -3780,7 +3921,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 
 @media (min-width: 25rem) {
   @media (max-width: 62.9375rem) {
-    .emotion-12 {
+    .emotion-14 {
       margin: 0 1rem;
       padding-bottom: 2rem;
     }
@@ -3788,21 +3929,21 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-12 {
+  .emotion-14 {
     margin: 0 1rem;
     padding-bottom: 2.5rem;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-12 {
+  .emotion-14 {
     margin: 0 auto;
     padding: 0 1rem 1.5rem;
     max-width: 80rem;
   }
 }
 
-.emotion-13 {
+.emotion-15 {
   position: relative;
   z-index: 0;
   color: #141414;
@@ -3810,36 +3951,36 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-13 {
+  .emotion-15 {
     margin-top: 1.5rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-13 {
+  .emotion-15 {
     margin-bottom: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-13 {
+  .emotion-15 {
     margin-bottom: 1rem;
   }
 }
 
-.emotion-15 {
+.emotion-17 {
   margin: 0;
   padding: 0;
   scroll-margin-top: 1rem;
 }
 
-.emotion-15:focus-visible {
+.emotion-17:focus-visible {
   outline: 0.1875rem solid #000000;
   box-shadow: 0 0 0 0.1875rem #FFFFFF;
   outline-offset: 0.1875rem;
 }
 
-.emotion-17 {
+.emotion-19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3849,7 +3990,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   flex-direction: column;
 }
 
-.emotion-19 {
+.emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3869,7 +4010,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-19 {
+  .emotion-21 {
     -webkit-align-items: stretch;
     -webkit-box-align: stretch;
     -ms-flex-align: stretch;
@@ -3877,7 +4018,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 }
 
-.emotion-21 {
+.emotion-23 {
   font-size: 1.25rem;
   line-height: 1.75rem;
   font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
@@ -3897,32 +4038,32 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-21 {
+  .emotion-23 {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-23 {
     font-size: 1.5rem;
     line-height: 2rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-23 {
     margin: 0;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-21 {
+  .emotion-23 {
     padding-left: 1rem;
   }
 }
 
-.emotion-23 {
+.emotion-25 {
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -3931,7 +4072,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @supports (display: grid) {
-  .emotion-23 {
+  .emotion-25 {
     display: grid;
     position: initial;
     width: initial;
@@ -3939,7 +4080,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -3947,7 +4088,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -3955,7 +4096,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 0.5rem;
@@ -3963,7 +4104,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       grid-column-gap: 1rem;
@@ -3971,7 +4112,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(8, 1fr);
       grid-column-end: span 8;
       grid-column-gap: 1rem;
@@ -3979,7 +4120,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   }
 
   @media (min-width: 80rem) {
-    .emotion-23 {
+    .emotion-25 {
       grid-template-columns: repeat(20, 1fr);
       grid-column-end: span 20;
       grid-column-gap: 1rem;
@@ -3988,24 +4129,24 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 80rem) {
-  .emotion-23 {
+  .emotion-25 {
     grid-auto-flow: row;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-25 {
     grid-template-rows: repeat(5, auto);
   }
 }
 
-.emotion-25 {
+.emotion-27 {
   position: relative;
   padding-bottom: 1.5rem;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -4013,7 +4154,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -4021,7 +4162,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(100%);
     display: inline-block;
     vertical-align: top;
@@ -4029,7 +4170,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(50%);
     display: inline-block;
     vertical-align: top;
@@ -4037,7 +4178,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(50%);
     display: inline-block;
     vertical-align: top;
@@ -4045,7 +4186,7 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 80rem) {
-  .emotion-25 {
+  .emotion-27 {
     width: calc(20%);
     display: inline-block;
     vertical-align: top;
@@ -4053,56 +4194,56 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @supports (display: grid) {
-  .emotion-25 {
+  .emotion-27 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
     }
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(3, 1fr);
       grid-column-end: span 3;
     }
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(4, 1fr);
       grid-column-end: span 4;
     }
   }
 
   @media (min-width: 80rem) {
-    .emotion-25 {
+    .emotion-27 {
       grid-template-columns: repeat(4, 1fr);
       grid-column-end: span 4;
     }
   }
 }
 
-.emotion-27 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4115,50 +4256,50 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 1rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 2rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 1.5rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-28 {
+    .emotion-30 {
       min-width: 1.5rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-28 {
+  .emotion-30 {
     min-width: 1.5rem;
   }
 }
 
-.emotion-29 {
+.emotion-31 {
   font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -4171,32 +4312,32 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-29 {
+  .emotion-31 {
     font-size: 2.5rem;
     line-height: 2.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-29 {
+  .emotion-31 {
     font-size: 3.5rem;
     line-height: 3.75rem;
   }
 }
 
-.emotion-30 {
+.emotion-32 {
   padding-top: 0.375rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
-  .emotion-30 {
+  .emotion-32 {
     padding-left: 0;
   }
 }
 
-.emotion-31 {
+.emotion-33 {
   font-size: 0.9375rem;
   line-height: 1.5rem;
   font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
@@ -4210,26 +4351,26 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-31 {
+  .emotion-33 {
     font-size: 1rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-31 {
+  .emotion-33 {
     font-size: 1rem;
     line-height: 1.5rem;
   }
 }
 
-.emotion-31:hover,
-.emotion-31:focus {
+.emotion-33:hover,
+.emotion-33:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.emotion-31:before {
+.emotion-33:before {
   bottom: 0;
   content: '';
   left: 0;
@@ -4242,31 +4383,31 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 25rem) {
-  .emotion-31 {
+  .emotion-33 {
     font-size: 1.125rem;
     line-height: 1.625rem;
   }
 
   @media (min-width: 20rem) and (max-width: 37.4375rem) {
-    .emotion-31 {
+    .emotion-33 {
       font-size: 1.125rem;
       line-height: 1.625rem;
     }
   }
 
   @media (min-width: 37.5rem) {
-    .emotion-31 {
+    .emotion-33 {
       font-size: 1.25rem;
       line-height: 1.75rem;
     }
   }
 }
 
-.emotion-32 {
+.emotion-34 {
   padding-top: 0.5rem;
 }
 
-.emotion-33 {
+.emotion-35 {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #545658;
@@ -4277,235 +4418,235 @@ exports[`Article Page should render a rtl article (persian) with most read corre
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-33 {
+  .emotion-35 {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-33 {
+  .emotion-35 {
     font-size: 0.8125rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-38 {
+  .emotion-40 {
     min-width: 1rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-38 {
+  .emotion-40 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-38 {
+  .emotion-40 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-38 {
+  .emotion-40 {
     min-width: 2rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-38 {
+  .emotion-40 {
     min-width: 2rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-38 {
+    .emotion-40 {
       min-width: 1.5rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-38 {
+  .emotion-40 {
     min-width: 1.5rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-68 {
+  .emotion-70 {
     min-width: 1rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-68 {
+  .emotion-70 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-68 {
+  .emotion-70 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-68 {
+  .emotion-70 {
     min-width: 2rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-68 {
+  .emotion-70 {
     min-width: 1.5rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-68 {
+    .emotion-70 {
       min-width: 1.5rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-68 {
+  .emotion-70 {
     min-width: 2rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-78 {
+  .emotion-80 {
     min-width: 1rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-78 {
+  .emotion-80 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-78 {
+  .emotion-80 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-78 {
+  .emotion-80 {
     min-width: 2rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-78 {
+  .emotion-80 {
     min-width: 2rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-78 {
+    .emotion-80 {
       min-width: 2rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-78 {
+  .emotion-80 {
     min-width: 1.5rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-88 {
+  .emotion-90 {
     min-width: 1rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-88 {
+  .emotion-90 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-88 {
+  .emotion-90 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-88 {
+  .emotion-90 {
     min-width: 2rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-88 {
+  .emotion-90 {
     min-width: 1.5rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-88 {
+    .emotion-90 {
       min-width: 2rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-88 {
+  .emotion-90 {
     min-width: 1.5rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-118 {
+  .emotion-120 {
     min-width: 1rem;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-118 {
+  .emotion-120 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-118 {
+  .emotion-120 {
     min-width: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-118 {
+  .emotion-120 {
     min-width: 2rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-118 {
+  .emotion-120 {
     min-width: 2rem;
   }
 }
 
 @supports (grid-template-columns: fit-content(200px)) {
   @media (min-width: 37.5rem) {
-    .emotion-118 {
+    .emotion-120 {
       min-width: 2rem;
     }
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-118 {
+  .emotion-120 {
     min-width: 2rem;
   }
 }
@@ -4526,16 +4667,25 @@ exports[`Article Page should render a rtl article (persian) with most read corre
       <div
         class="emotion-2"
       >
-        <main
+        <div
+          aria-hidden="true"
           class="emotion-3"
+        >
+          <span
+            class="emotion-4"
+            data-testid="article-progress-bar"
+          />
+        </div>
+        <main
+          class="emotion-5"
           role="main"
         >
           <div
-            class="emotion-4 emotion-5"
+            class="emotion-6 emotion-7"
             dir="rtl"
           >
             <h1
-              class="article-heading emotion-6 emotion-7"
+              class="article-heading emotion-8 emotion-9"
               id="content"
               tabindex="-1"
             >
@@ -4543,11 +4693,11 @@ exports[`Article Page should render a rtl article (persian) with most read corre
             </h1>
           </div>
           <div
-            class="emotion-8 emotion-5"
+            class="emotion-10 emotion-7"
             dir="rtl"
           >
             <p
-              class="emotion-10 emotion-11"
+              class="emotion-12 emotion-13"
               dir="rtl"
             >
               یک پاراگراف.
@@ -4558,27 +4708,27 @@ exports[`Article Page should render a rtl article (persian) with most read corre
     </div>
     <section
       aria-labelledby="Most-Read"
-      class="emotion-12"
+      class="emotion-14"
       data-e2e="most-read"
       data-testid="most-read"
       role="region"
     >
       <div
-        class="emotion-13 emotion-14"
+        class="emotion-15 emotion-16"
       >
         <h2
-          class="emotion-15 emotion-16"
+          class="emotion-17 emotion-18"
           id="section-label-heading-Most-Read"
           tabindex="-1"
         >
           <span
-            class="emotion-17 emotion-18"
+            class="emotion-19 emotion-20"
           >
             <span
-              class="emotion-19 emotion-20"
+              class="emotion-21 emotion-22"
             >
               <span
-                class="emotion-21 emotion-22"
+                class="emotion-23 emotion-24"
                 dir="rtl"
                 id="Most-Read"
               >
@@ -4589,43 +4739,43 @@ exports[`Article Page should render a rtl article (persian) with most read corre
         </h2>
       </div>
       <ol
-        class="emotion-23 emotion-5"
+        class="emotion-25 emotion-7"
         dir="rtl"
         role="list"
       >
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-28"
+              class="emotion-30"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۱
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/c4n9j7rx27lo"
               >
                 ایران در آستانه بحران بنزین؛ تابستانی دشوار برای دولت رئیسی در پیش است
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-19"
                 >
                   به روز شده در ۱۹ ژوئن ۲۰۲۳
@@ -4635,38 +4785,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-38"
+              class="emotion-40"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۲
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/cm58lxneyrvo"
               >
                 پرونده حمید نوری؛ وکلای مدافع: نوری فریب خورد
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-19"
                 >
                   به روز شده در ۱۹ ژوئن ۲۰۲۳
@@ -4676,38 +4826,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-28"
+              class="emotion-30"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۳
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/cx7e0eexdeeo"
               >
                 اما رادوکانو: گاهی آرزو می‌کنم که ای کاش قهرمان اوپن آمریکا نمی‌شدم
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-19"
                 >
                   به روز شده در ۱۹ ژوئن ۲۰۲۳
@@ -4717,38 +4867,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-38"
+              class="emotion-40"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۴
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/cqe0045zrpdo"
               >
                 ملی‌پوش سابق هلند برای چاقو زدن به فامیلش به ۱۸ ماه حبس محکوم شد
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-19"
                 >
                   به روز شده در ۱۹ ژوئن ۲۰۲۳
@@ -4758,38 +4908,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-68"
+              class="emotion-70"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۵
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/cjmyylvr1nvo"
               >
                 وزیر خارجه آمریکا در پکن؛ شی: پیشرفت‌هایی در روابط حاصل شده است، بلینکن: رقابت نباید بدل به دشمنی شود
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-19"
                 >
                   به روز شده در ۱۹ ژوئن ۲۰۲۳
@@ -4799,38 +4949,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-78"
+              class="emotion-80"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۶
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/cyxgqq1796qo"
               >
                 سگم سرطان پستان مرا تشخیص داد
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-18"
                 >
                   به روز شده در ۱۸ ژوئن ۲۰۲۳
@@ -4840,38 +4990,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-88"
+              class="emotion-90"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۷
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/cydg800g89yo"
               >
                 لوح ۲۸۰۰ ساله از ایتالیا به عراق بازگردانده شد
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-18"
                 >
                   به روز شده در ۱۸ ژوئن ۲۰۲۳
@@ -4881,38 +5031,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-78"
+              class="emotion-80"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۸
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/cgr664ezld5o"
               >
                 نمایندگان کشورها و نهادها در اجلاس سازمان ملل خواستار پایان یافتن سیاست‌های تبعیض‌آمیز طالبان علیه زنان شدند
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-19"
                 >
                   به روز شده در ۱۹ ژوئن ۲۰۲۳
@@ -4922,38 +5072,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-88"
+              class="emotion-90"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۹
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/c9wj7ejl17po"
               >
                 چرا موبایل داغ می‌کند و چطور آن را خنک نگه داریم؟
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-18"
                 >
                   به روز شده در ۱۸ ژوئن ۲۰۲۳
@@ -4963,38 +5113,38 @@ exports[`Article Page should render a rtl article (persian) with most read corre
           </div>
         </li>
         <li
-          class="emotion-25 emotion-5"
+          class="emotion-27 emotion-7"
           dir="rtl"
           role="listitem"
         >
           <div
-            class="emotion-27"
+            class="emotion-29"
           >
             <div
-              class="emotion-118"
+              class="emotion-120"
               dir="rtl"
             >
               <span
-                class="emotion-29"
+                class="emotion-31"
               >
                 ۱۰
               </span>
             </div>
             <div
-              class="emotion-30"
+              class="emotion-32"
               dir="rtl"
             >
               <a
-                class="emotion-31"
+                class="emotion-33"
                 href="https://www.bbc.com/persian/articles/c6plvgyz614o"
               >
                 هشتگ «داستان_ما_یکیست» در چهلمین سالگرد اعدام ۱۰ زن بهائی در شیراز
               </a>
               <div
-                class="emotion-32"
+                class="emotion-34"
               >
                 <time
-                  class="emotion-33 emotion-34"
+                  class="emotion-35 emotion-36"
                   datetime="2023-06-18"
                 >
                   به روز شده در ۱۸ ژوئن ۲۰۲۳