list style and header fixes

src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte

@@ -42,6 +42,7 @@
 
   a {
     text-decoration: none;
+    font-family: var(--theme-font-family-sans-serif);
     &:hover {
       color: inherit;
       text-decoration: underline !important;
@@ -71,6 +72,10 @@
       margin: 0;
       list-style: none;
 
+      li {
+        margin: 0;
+      }
+
       .subsection-link {
         font-size: 16px;
         color: var(--nav-primary, var(--tr-dark-grey));

src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte

@@ -67,6 +67,16 @@
       padding: 0;
       margin: 12px 0 0 0;
 
+      font-family: var(--theme-font-family-sans-serif);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 18px;
+      color: var(--nav-primary, #404040);
+
+      li {
+        margin: 0;
+      }
+
       &:first-child {
         margin-right: 16px;
       }

src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte

@@ -101,6 +101,7 @@
         object-fit: cover;
         width: 100%;
         height: 100%;
+        margin: 0;
       }
     }
   }

src/components/SiteHeader/NavBar/NavDropdown/index.svelte

@@ -166,6 +166,12 @@
     padding: 0;
     margin: 20px 0 0 0;
 
+    font-family: var(--theme-font-family-sans-serif);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--nav-primary, #404040);
+
     @include at-4-columns {
       grid-template-columns: repeat(1, 1fr);
     }
@@ -173,6 +179,7 @@
 
   .story-item {
     padding-bottom: 20px;
+    margin: 0;
     animation: fadein 0.5s both $easeOutExpo;
 
     &:nth-child(1),

src/components/SiteHeader/NavBar/index.svelte

@@ -28,9 +28,11 @@
 
 <div class="nav-bar">
   <nav aria-label="Main navigation">
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <ul class="nav-list">
       {#each displaySections as section}
         {#if section.children}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             class="nav-item category link"
             on:mouseenter="{() => {
@@ -83,6 +85,7 @@
           </li>
         {/if}
       {/each}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <li
         class="nav-item"
         on:mouseenter="{() => {
@@ -138,13 +141,20 @@
   }
 
   .nav-list {
+    display: block;
     list-style: none;
     margin: 0;
     padding: 0;
+
+    font-family: var(--theme-font-family-sans-serif);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.5;
   }
 
   .nav-item {
     display: inline-flex;
+    margin: 0;
     padding: 0 10px;
     @include font-sans;
     font-weight: 500;

src/components/SiteHeadline/SiteHeadline.svelte

@@ -99,13 +99,3 @@
     />
   </header>
 </Block>
-
-<style lang="scss">
-  @use '../../scss/mixins' as *;
-
-  @media (max-width: $column-width-narrow) {
-    h1 {
-      @include font-semibold;
-    }
-  }
-</style>

src/scss/reset/_typography.scss

@@ -1,9 +1,13 @@
 @use '../mixins' as *;
 
+html {
+  font-size: 100%;
+}
+
 body {
   font-size: 1rem;
   color: #404040;
-  @include font-sans;
+  @include font-knowledge;
   @include font-regular;
   @include leading-tight;
 
@@ -14,6 +18,7 @@ body {
   .theme {
     font-size: calc(0.9 * var(--theme-font-size-base));
     color: var(--theme-colour-text-primary);
+    @include font-sans;
   }
 }
 
@@ -70,20 +75,29 @@ ul {
   display: block;
   @include body-text;
   @include fmb-6;
+  @include fpl-4;
+  list-style-position: outside;
+
+  ol,
+  ul {
+    @include fpl-4;
+    @include fmb-2;
+  }
+
   li {
-    @include fpl-1;
     @include fmy-1;
   }
+
+  li::marker {
+    @include font-light;
+    @include font-note;
+    @include text-sm;
+    @include text-secondary;
+  }
 }
 
 ul {
-  @include fpl-2;
+  list-style-type: disc;
-
-  li::marker {
-    content: '–';
-    @include font-light;
-    @include text-secondary;
-  }
 }
 
 a {