quick fixes for #116

src/components/NoteText/NoteText.svelte

@@ -30,7 +30,11 @@
     h4,
     h5,
     h6 {
-      @include h3;
+      @include body-note;
+      @include tracking-wide;
+      @include text-primary;
+      @include font-semibold;
+      @include fmt-3;
       text-transform: none;
     }
 

src/components/SiteFooter/Referrals/index.svelte

@@ -8,7 +8,7 @@
 <IntersectionObserver let:intersecting top="{2400}" once="{true}">
   {#if intersecting}
     <section class="referrals px-0 py-5">
-      <h2 class="text-base font-medium">
+      <h2 class="fmt-0 text-base font-medium">
         <a href="https://graphics.reuters.com/">More from Reuters Graphics</a>
       </h2>
       {#if typeof window !== 'undefined'}

src/components/SiteHeadline/SiteHeadline.svelte

@@ -70,7 +70,7 @@
   }
 </script>
 
-<Block id="{id}" class="headline-container !my-16 {cls}" width="normal">
+<Block id="{id}" class="headline-container fmt-9 fmb-5 {cls}" width="normal">
   <header class="headline">
     <div class="title">
       {#if section}
@@ -87,9 +87,7 @@
         </p>
       {/if}
       {#if hed}
-        <h1
-          class="font-hed text-primary leading-none font-medium fmt-1 fmb-3 {hedClass}"
-        >
+        <h1 class="fmt-1 fmb-3 {hedClass}">
           {hed}
         </h1>
       {/if}

src/scss/tokens/text/mixins/_text-role.scss

@@ -58,7 +58,7 @@
 
 @mixin body-note {
   @include fmt-0;
-  @include fmb-2;
+  @include fmb-1;
   @include font-note;
   font-size: calc(0.85 * var(--theme-font-size-base));
   @include font-light;