diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index 5be9f160..ab70a238 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -11,7 +11,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block class="notes mb-24">
+<Block class="notes">
   {#if text}
     {@html marked.parse(text)}
   {/if}
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index 57655272..5aa64a37 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -97,7 +97,7 @@
   };
 </script>
 
-<Block width="{width}" id="{id}" class="photo-carousel {cls}">
+<Block width="{width}" id="{id}" class="photo-carousel fmy-5 {cls}">
   <div class="carousel-container" bind:clientWidth="{containerWidth}">
     <Splide
       hasTrack="{false}"
@@ -116,11 +116,11 @@
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
-                  class="m-0 w-full relative"
+                  class="fm-0 w-full relative"
                   style="height: {carouselHeight}px;"
                 >
                   <img
-                    class="w-full h-full my-0"
+                    class="w-full h-full fmy-0"
                     data-splide-lazy="{photo.src}"
                     alt="{photo.altText}"
                     style:object-fit="{photo.objectFit ||
@@ -132,7 +132,7 @@
                     <slot name="credit" credit="{photo.credit}" />
                   {:else}
                     <span
-                      class="credit absolute m-0 leading-tighter font-note text-xxs"
+                      class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
                       class:contain-fit="{photo.objectFit === 'contain' ||
                         defaultImageObjectFit === 'contain'}"
                       >{photo.credit}</span
@@ -168,7 +168,7 @@
           <div class="splide__progress__bar"></div>
         </div>
 
-        <div class="splide__arrows">
+        <div class="splide__arrows fp-1">
           <button class="splide__arrow splide__arrow--prev">
             <Fa icon="{faChevronLeft}" fw />
           </button>
@@ -188,8 +188,8 @@
     .photo-slide {
       figure {
         span.credit {
-          bottom: 4px;
-          left: 10px;
+          bottom: 0;
+          left: 0;
           color: white;
           text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333,
             1px 1px 0 #333;
@@ -210,8 +210,7 @@
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
-        padding: 0px;
-        padding-top: 4px;
+
         button {
           display: flex;
           font-size: 14px;
@@ -248,11 +247,11 @@
         flex-wrap: nowrap;
         li {
           flex-grow: 1;
+          margin-top: -9px;
           button {
             width: 100%;
             height: 7px;
             border-radius: 0;
-            margin: 0 0px;
             padding: 0;
             border: 1px solid $theme-colour-background;
             background: $theme-colour-text-secondary;
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index aae28998..af242a73 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -89,11 +89,8 @@
   $: rows = groupRows(images, layout);
 </script>
 
-<Block width="{width}" id="{id}" class="photopack {cls}">
-  <div
-    class="photopack-container w-full mb-2"
-    bind:clientWidth="{containerWidth}"
-  >
+<Block width="{width}" id="{id}" class="photopack fmy-5 {cls}">
+  <div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
     {#each rows as row, ri}
       <div
         class="photopack-row flex justify-between"
@@ -120,17 +117,19 @@
     {/each}
   </div>
   <PaddingReset containerIsFluid="{width === 'fluid'}">
-    <Block width="{captionWidth}" class="photopack-captions-container">
-      {#each rows as row, ri}
-        {#each row as img, i}
-          {#if img.caption}
-            <div id="{id}-figure-{ri}-{i}" class="caption">
-              {@html marked(img.caption)}
-            </div>
-          {/if}
+    <div class="notes contents">
+      <Block width="{captionWidth}" class="photopack-captions-container">
+        {#each rows as row, ri}
+          {#each row as img, i}
+            {#if img.caption}
+              <div id="{id}-figure-{ri}-{i}" class="caption">
+                {@html marked(img.caption)}
+              </div>
+            {/if}
+          {/each}
         {/each}
-      {/each}
-    </Block>
+      </Block>
+    </div>
   </PaddingReset>
 </Block>
 
@@ -150,14 +149,24 @@
     }
   }
 
-  :global {
-    .photopack-captions-container {
-      @include \!fmy-2;
-      div.caption {
-        p {
-          @include body-caption;
-        }
-      }
+  .notes {
+    :global(.photopack-captions-container) {
+      @include fmy-2;
+    }
+
+    :global(.photopack-captions-container .caption p) {
+      @include body-caption;
     }
   }
+
+  // :global {
+  //   .photopack-captions-container {
+  //     @include \!fmy-2;
+  //     div.caption {
+  //       p {
+  //         @include body-caption;
+  //       }
+  //     }
+  //   }
+  // }
 </style>
diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
index d2489767..0eea42d1 100644
--- a/src/components/ReferralBlock/ReferralBlock.stories.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -50,7 +50,7 @@
   args="{{
     section: '/lifestyle/sports/',
     number: 4,
-    cls: 'my-3',
+    class: 'fmy-5',
     heading: 'More World Cup coverage',
   }}"
 />
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index d8f1999f..a5765a37 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -76,7 +76,7 @@
 </script>
 
 {#if $referrals.length === number}
-  <Block width="{width}" id="{id}" class="referrals-block {cls}">
+  <Block width="{width}" id="{id}" class="referrals-block fmy-5 {cls}">
     {#if heading}
       <div
         class="heading h4 font-bold"
diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte
index 094eaf3e..fbaf5f41 100644
--- a/src/components/Scroller/Foreground.svelte
+++ b/src/components/Scroller/Foreground.svelte
@@ -47,6 +47,7 @@
     max-width: initial;
     .step-foreground {
       max-width: calc($column-width-normal * 0.9);
+      border-radius: 0.25rem;
       @include fpy-5;
       @include fpx-4;
       background: rgba(255, 255, 255, 0.9);
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index 5edf0122..bb1b67f0 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -101,7 +101,7 @@
 </script>
 
 {#if !embedded}
-  <Block width="fluid" class="scroller-container" id="{id}">
+  <Block width="fluid" class="scroller-container fmy-5" id="{id}">
     <SvelteScroller
       bind:index="{index}"
       bind:offset="{offset}"
diff --git a/src/components/SearchInput/MagnifyingGlass.svelte b/src/components/SearchInput/MagnifyingGlass.svelte
index 6032bc91..1310ae96 100644
--- a/src/components/SearchInput/MagnifyingGlass.svelte
+++ b/src/components/SearchInput/MagnifyingGlass.svelte
@@ -15,7 +15,7 @@
   svg {
     vertical-align: middle;
     path {
-      fill: $theme-colour-text-secondary;
+      fill: $theme-colour-brand-rules;
     }
   }
 </style>
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
index 14f2f9b6..981fc847 100644
--- a/src/components/SearchInput/SearchInput.svelte
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -26,20 +26,22 @@
   }
 </script>
 
-<div class="search" class:active="{active}">
-  <div class="search--icon">
+<div class="search relative inline-flex items-center" class:active="{active}">
+  <div class="search--icon absolute ml-2 mt-1.5">
     <MagnifyingGlass />
   </div>
   <input
     id="search--input"
-    class="search--input"
+    class="search--input body-caption pl-8"
     type="text"
     placeholder="{searchPlaceholder}"
     on:input="{input}"
     bind:value="{value}"
   />
   <div
-    class="search--x"
+    class="search--x absolute mt-1"
+    role="button"
+    tabindex="0"
     class:invisible="{!active}"
     on:click="{clear}"
     on:keyup="{clear}"
@@ -52,34 +54,24 @@
   @use '../../scss/mixins' as *;
 
   .search {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    width: 256px;
-    padding: 0 0 0 0.1rem;
+    width: 250px;
     .search--icon {
-      position: absolute;
-      left: 0.5rem;
-      top: 0.15rem;
+      left: 0;
+      top: 0;
       width: 1.5rem;
       height: 1.5rem;
       fill: $theme-colour-brand-rules;
     }
     .search--input {
-      @include font-sans;
-      @include text-primary;
-      padding: 0 0 0 2rem;
-      font-size: 0.8rem;
-      height: 33px;
+      height: 2.15rem;
       border: 1px solid $theme-colour-brand-rules;
       background: transparent;
-      border-radius: 6px;
+      border-radius: 0.25rem;
       width: 100%;
     }
     .search--x {
-      position: absolute;
       right: 0;
-      top: 0.15rem;
+      top: 0;
       width: 1.5rem;
       height: 1.5rem;
       fill: $theme-colour-text-primary;
diff --git a/src/components/SearchInput/X.svelte b/src/components/SearchInput/X.svelte
index 6f4a3071..8dfdf8c1 100644
--- a/src/components/SearchInput/X.svelte
+++ b/src/components/SearchInput/X.svelte
@@ -24,7 +24,7 @@
   svg {
     vertical-align: middle;
     path {
-      fill: $theme-colour-text-secondary;
+      fill: $theme-colour-brand-rules;
     }
     rect {
       fill: $theme-colour-background;
diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
index eac4a09d..b6a23855 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
@@ -106,7 +106,5 @@
   name="Default"
   args="{{
     dates,
-    symbolColour: '#999',
-    dateColour: '#e05a39',
   }}"
 />
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index 8aff6eb9..5ae58e15 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -18,7 +18,7 @@
    * Set a colour for the timeline bullet symbols and line.
    * @type {string}
    */
-  export let symbolColour: string = '#ccc';
+  export let symbolColour: string = 'var(--theme-colour-brand-rules)';
   /**
    * Set a colour for the date headings in the timeline.
    * @type {string}
@@ -44,11 +44,11 @@
 
 <Block width="normal" id="{id}" class="simple-timeline-container {cls}">
   <div
-    class="timeline mt-8 pl-2 pr-3.5"
+    class="timeline fmy-5 pl-2 pr-3.5"
     style="--symbol-colour:{symbolColour};"
   >
     {#each dates as date}
-      <div class="date relative m-0 pl-5 pb-4">
+      <div class="date relative pt-0.5 pl-5 pb-4">
         <svg class="absolute bg" height="25" width="20">
           <circle
             cx="10"
@@ -59,7 +59,7 @@
             fill="transparent"></circle>
         </svg>
         <div
-          class="timeline-date font-subhed font-bold mt-0 text-sm fmb-1"
+          class="timeline-date font-note text-xs uppercase font-black tracking-wide fmb-0"
           style:color="{dateColour}"
         >
           {date.date}
@@ -68,17 +68,13 @@
           <div class="event pb-2">
             {#if event.titleLink}
               <a href="{event.titleLink}" target="_blank">
-                <div
-                  class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
-                >
+                <div class="title h3">
                   {event.title}
                   <span class="text-sm"><Fa fw icon="{faLink}" /></span>
                 </div>
               </a>
             {:else}
-              <div
-                class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
-              >
+              <div class="title h3">
                 {event.title}
               </div>
             {/if}
@@ -105,6 +101,12 @@
       top: -1px;
       left: -10px;
     }
+    div.title {
+      @include fmt-2;
+      @include fmb-1;
+      @include font-medium;
+    }
+
     div.event {
       a {
         text-decoration: none;
@@ -121,12 +123,13 @@
         }
       }
       :global(p) {
-        @include fmb-2;
-        @include leading-normal;
-        @include font-light;
-        @include text-sm;
-        @include font-note;
-        @include text-primary;
+        @include body-note;
+        // @include fmb-2;
+        // @include leading-normal;
+        // @include font-light;
+        // @include text-sm;
+        // @include font-note;
+        // @include text-primary;
       }
     }
   }
diff --git a/src/components/SimpleTimeline/stories/docs/component.md b/src/components/SimpleTimeline/stories/docs/component.md
index 915105a7..74a12385 100644
--- a/src/components/SimpleTimeline/stories/docs/component.md
+++ b/src/components/SimpleTimeline/stories/docs/component.md
@@ -20,9 +20,5 @@ A simple, clean text timeline.
   ];
 </script>
 
-<SimpleTimeline
-  dates="{dates}"
-  symbolColour="#999"
-  dateColour="rgb(224, 90, 57)"
-/>
+<SimpleTimeline dates="{dates}" />
 ```
diff --git a/src/components/SiteFooter/Referrals/Link.svelte b/src/components/SiteFooter/Referrals/Link.svelte
index 5eb1c00e..0653a327 100644
--- a/src/components/SiteFooter/Referrals/Link.svelte
+++ b/src/components/SiteFooter/Referrals/Link.svelte
@@ -6,7 +6,7 @@
   export let description;
 </script>
 
-<div class="referral" title="{description}">
+<div class="referral py-0 px-3" title="{description}">
   <a href="{url.replace('index.html', '')}">
     <IntersectionObserver let:intersecting top="{600}" once="{true}">
       {#if intersecting}
@@ -19,7 +19,7 @@
         <div class="image"></div>
       {/if}
     </IntersectionObserver>
-    <p data-chromatic="ignore">{title}</p>
+    <p class="body-caption" data-chromatic="ignore">{title}</p>
   </a>
 </div>
 
@@ -40,9 +40,9 @@
 
   .referral {
     div.image {
-      margin-bottom: 5px;
+      @include fmb-1;
       border: 1px solid var(--nav-rules, #efefef);
-      border-radius: 8px;
+      border-radius: 0.25rem;
     }
 
     a:hover {
@@ -53,18 +53,13 @@
     }
 
     p {
-      @include font-sans;
-
       color: var(--nav-primary, #666);
-      font-size: 0.9rem;
-      line-height: 1.2rem;
       text-transform: none;
       margin: 0;
-      font-weight: 400;
     }
 
     width: 25%;
-    padding: 0 10px;
+    // padding: 0 10px;
 
     @media (max-width: 768px) {
       width: 33.33333%;
diff --git a/src/components/SiteFooter/Referrals/index.svelte b/src/components/SiteFooter/Referrals/index.svelte
index d736da1e..86a48530 100644
--- a/src/components/SiteFooter/Referrals/index.svelte
+++ b/src/components/SiteFooter/Referrals/index.svelte
@@ -7,8 +7,8 @@
 
 <IntersectionObserver let:intersecting top="{2400}" once="{true}">
   {#if intersecting}
-    <section class="referrals">
-      <h2>
+    <section class="referrals px-0 py-5">
+      <h2 class="text-base font-medium">
         <a href="https://graphics.reuters.com/">More from Reuters Graphics</a>
       </h2>
       {#if typeof window !== 'undefined'}
@@ -25,14 +25,10 @@
   section.referrals {
     margin: 0;
     max-width: 1400px;
-    padding: 25px 0;
     @include spacing-single(padding-left padding-right);
     border-top: 1px solid var(--nav-rules, #999);
 
     h2 {
-      font-size: 16px;
-      font-weight: 500;
-      margin: 0 0 10px;
       color: var(--nav-primary, #666);
       a {
         color: var(--nav-primary, #666);
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
index 1b9b6844..a3559edc 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -85,6 +85,7 @@
     display: inline-block;
     padding: 4px 0;
     margin-bottom: 2px;
+    font-family: var(--theme-font-family-sans-serif);
     &:hover {
       text-decoration: underline;
     }
diff --git a/src/components/Video/Video.svelte b/src/components/Video/Video.svelte
index 3b4121e1..71eb9367 100644
--- a/src/components/Video/Video.svelte
+++ b/src/components/Video/Video.svelte
@@ -4,7 +4,7 @@
   import Controls from './Controls.svelte';
   import Block from '../Block/Block.svelte';
   import type { ContainerWidth } from '../@types/global';
-
+  import { marked } from 'marked';
   /// //////////////////////////////////
   /// /////////// Props ////////////////
   /// //////////////////////////////////
@@ -123,7 +123,7 @@
   on:touchstart="{setInteractedWithDom}"
 />
 
-<Block width="{width}" class="video-container">
+<Block width="{width}" class="video-container fmy-5">
   <div
     on:mouseover="{() => {
       interactiveControlsOpacity = controlsOpacity;
@@ -153,7 +153,7 @@
         >
           <div
             bind:this="{element}"
-            class="video-wrapper relative"
+            class="video-wrapper relative block"
             aria-hidden="{ariaHidden}"
             bind:clientWidth="{widthVideoContainer}"
             bind:clientHeight="{heightVideoContainer}"
@@ -258,8 +258,20 @@
         </div>
       {/if}
       {#if caption}
-        <div class="caption text-secondary text-xs">{caption}</div>
+        <aside class="fmt-2">
+          {@html marked(caption)}
+        </aside>
       {/if}
     {/if}
   </div>
 </Block>
+
+<style lang="scss">
+  @import '../../scss/mixins';
+  // Caption and Sources
+  aside {
+    :global(p) {
+      @include body-caption;
+    }
+  }
+</style>
diff --git a/src/scss/reset/_main.scss b/src/scss/reset/_main.scss
index 30f349bc..8e67fa62 100644
--- a/src/scss/reset/_main.scss
+++ b/src/scss/reset/_main.scss
@@ -19,6 +19,11 @@ body {
   }
 }
 
+img,
+video {
+  display: block;
+}
+
 img {
   max-width: 100%;
   @include fmy-5;
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index 4bc9dbaf..53b520c5 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -75,7 +75,7 @@ ul {
   padding-left: 2rem;
   ol,
   ul {
-    margin-block-end: 0;
+    margin-bottom: 0;
   }
 }
 
diff --git a/src/scss/tokens/sizing/_height.scss b/src/scss/tokens/sizing/_height.scss
index f69abd59..d333ce3f 100644
--- a/src/scss/tokens/sizing/_height.scss
+++ b/src/scss/tokens/sizing/_height.scss
@@ -2,7 +2,7 @@
   height: 100%;
 }
 .h-screen {
-  height: 100vh;
+  height: 100svh;
 }
 .h-1\/2 {
   height: 50%;
@@ -86,7 +86,7 @@
   height: 100% !important;
 }
 .\!h-screen {
-  height: 100vh !important;
+  height: 100svh !important;
 }
 .\!h-1\/2 {
   height: 50% !important;
diff --git a/src/scss/tokens/sizing/_max-height.scss b/src/scss/tokens/sizing/_max-height.scss
index 8d8e42a2..fce13180 100644
--- a/src/scss/tokens/sizing/_max-height.scss
+++ b/src/scss/tokens/sizing/_max-height.scss
@@ -2,11 +2,11 @@
   max-height: 100%;
 }
 .max-h-screen {
-  max-height: 100vh;
+  max-height: 100svh;
 }
 .\!max-h-full {
   max-height: 100% !important;
 }
 .\!max-h-screen {
-  max-height: 100vh !important;
+  max-height: 100svh !important;
 }
diff --git a/src/scss/tokens/sizing/_min-height.scss b/src/scss/tokens/sizing/_min-height.scss
index a3c16925..367fcec8 100644
--- a/src/scss/tokens/sizing/_min-height.scss
+++ b/src/scss/tokens/sizing/_min-height.scss
@@ -2,11 +2,11 @@
   min-height: 100%;
 }
 .min-h-screen {
-  min-height: 100vh;
+  min-height: 100svh;
 }
 .\!min-h-full {
   min-height: 100% !important;
 }
 .\!min-h-screen {
-  min-height: 100vh !important;
+  min-height: 100svh !important;
 }
diff --git a/src/scss/tokens/text/mixins/_text-role.scss b/src/scss/tokens/text/mixins/_text-role.scss
index fbdb5f35..9586205e 100644
--- a/src/scss/tokens/text/mixins/_text-role.scss
+++ b/src/scss/tokens/text/mixins/_text-role.scss
@@ -36,7 +36,6 @@
 }
 
 @mixin h4 {
-  @include text-primary;
   @include font-subhed;
   @include leading-tight;
   @include text-sm;