Mobile header and nav styles.

spearhead/assets/sass/_header.scss

@@ -1,11 +1,15 @@
 .has-main-navigation {
     .site-header {
-        @include media( mobile ){
-            padding: calc( 2 * var(--global--spacing-vertical) ) 0;
-        };
+        @include media( mobile-only ){
+            padding-top: 4px;
+            .site-description {
+                display: none;
+            }
+        }
     }
 }
 
+
 .site-header {
     display: flex;
     justify-content: space-between;

spearhead/style-rtl.css

@@ -77,7 +77,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .home .post .entry-title {
-	font-size: var(--global--font-size-xl);
+	font-size: var(--global--font-size-lg);
 	margin-bottom: 0;
 }
 
@@ -111,9 +111,9 @@ a {
 	font-weight: 500;
 }
 
-@media only screen and (min-width: 482px) {
-	.has-main-navigation .site-header {
-		padding: calc( 2 * var(--global--spacing-vertical)) 0;
+@media only screen and (max-width: 481px) {
+	.has-main-navigation .site-header .site-description {
+		display: none;
 	}
 }
 

spearhead/style.css

@@ -111,9 +111,12 @@ a {
 	font-weight: 500;
 }
 
-@media only screen and (min-width: 482px) {
+@media only screen and (max-width: 481px) {
 	.has-main-navigation .site-header {
-		padding: calc( 2 * var(--global--spacing-vertical)) 0;
+		padding-top: 4px;
+	}
+	.has-main-navigation .site-header .site-description {
+		display: none;
 	}
 }
 

spearhead/variables.css

@@ -53,10 +53,13 @@
 	--cover--color-foreground: var(--global--color-background);
 
 	--branding--title--font-size: var(--global--font-size-lg);
+	--branding--title--font-size-mobile: var(--global--font-size-root);
 
 	--primary-nav--justify-content: space-between;
 	--primary-nav--color-link: var(--global--color-secondary);
 	--primary-nav--padding: 0;
+	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
+	--primary-nav--font-size-mobile: var(--global--font-size-sm);
 
 	--social-nav--padding: calc( .67 * var(--global--spacing-unit) );
 
@@ -73,11 +76,11 @@
 @media ( min-width: 482px ){
 	:root {
 		/* Font Size */
-		/* --global--font-size-root: 20px;
+		--global--font-size-root: 20px;
 		--global--font-size-md: 20px;
 		--global--font-size-lg: 24px;
 		--global--font-size-xl: 36px;
-		--global--font-size-xxl: 48px; */
+		--global--font-size-xxl: 48px;
 		/* Line Height */
 		/* --heading--font-size-h1: 72px;
 		--heading--font-size-h2: 64px;