From 049be2fe6035ff2eac4453feeb809095e790d7f9 Mon Sep 17 00:00:00 2001
From: Allan Cole <allan.cole@automattic.com>
Date: Fri, 2 Aug 2019 11:59:37 -0400
Subject: [PATCH] Coutoire: Cleaning up typography

---
 coutoire/sass/_config-child-theme-deep.scss |  10 +-
 coutoire/sass/_extra-child-theme.scss       |  21 +--
 coutoire/style-editor.css                   |  50 ++++----
 coutoire/style-rtl.css                      | 130 ++++++++++---------
 coutoire/style.css                          | 134 ++++++++++----------
 5 files changed, 179 insertions(+), 166 deletions(-)

diff --git a/coutoire/sass/_config-child-theme-deep.scss b/coutoire/sass/_config-child-theme-deep.scss
index 36e125721..03d4699f2 100644
--- a/coutoire/sass/_config-child-theme-deep.scss
+++ b/coutoire/sass/_config-child-theme-deep.scss
@@ -10,9 +10,9 @@
 // Vertical Rhythm Multiplier
 $baseline-unit: 8px;
 
-$typescale-root: 18px; // Set 16px/1em default on html
+$typescale-root: 17px; // Set 16px/1em default on html
 $typescale-base: 1rem; // Set 1em default on body == $typescale-root;
-$typescale-ratio: 1.333; // Run ratio math on 1em == $typescale-base * $typescale-root;
+$typescale-ratio: 1.200; // Run ratio math on 1em == $typescale-base * $typescale-root;
 
 $config-global: (
 
@@ -29,7 +29,7 @@ $config-global: (
 		"size": (
 			"root": $typescale-root,
 			"ratio": $typescale-ratio,
-			"xs": ($typescale-base / $typescale-ratio),
+			"xs": ($typescale-base / $typescale-ratio / $typescale-ratio),
 			"sm": ($typescale-base / $typescale-ratio),
 			"base": $typescale-base,
 			"md": ($typescale-base * $typescale-ratio),
@@ -294,7 +294,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "primary"),
-				"size": map-deep-get($config-global, "font", "size", "xl"),
+				"size": map-deep-get($config-global, "font", "size", "xxxl"),
 				"weight": normal,
 				"line-height": 1,
 			),
@@ -304,7 +304,7 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": map-deep-get($config-global, "font", "family", "primary"),
-				"size": map-deep-get($config-global, "font", "size", "xl"),
+				"size": map-deep-get($config-global, "font", "size", "xxxl"),
 			),
 		),
 	),
diff --git a/coutoire/sass/_extra-child-theme.scss b/coutoire/sass/_extra-child-theme.scss
index 95e1574af..b6998a14c 100644
--- a/coutoire/sass/_extra-child-theme.scss
+++ b/coutoire/sass/_extra-child-theme.scss
@@ -68,19 +68,24 @@ a {
 	font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
 }
 
-.page-header .page-title {
-	font-size: #{map-deep-get($config-global, "font", "size", "base")};
-	font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
-	font-weight: 500;
-	text-transform: uppercase;
-	line-height: 1;
+#main .page-header {
+
+	margin-top: $spacing_vertical;
+
+	.page-title {
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+		font-weight: 500;
+		text-transform: uppercase;
+		line-height: 1;
+	}
 }
 
 .entry-title,
 .post-navigation .post-title,
 .comment-reply-title {
-	font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
-	letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h4")};
+	font-size: #{map-deep-get($config-heading, "font", "size", "h2")};
+	letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h2")};
 	line-height: 1;
 	text-transform: uppercase;
 }
diff --git a/coutoire/style-editor.css b/coutoire/style-editor.css
index 2a08d25c1..8f9585dd7 100644
--- a/coutoire/style-editor.css
+++ b/coutoire/style-editor.css
@@ -171,7 +171,7 @@ body {
 	color: #444444;
 	background-color: white;
 	font-family: "Work Sans", sans-serif;
-	font-size: 18px;
+	font-size: 17px;
 	font-weight: normal;
 	line-height: 1.78;
 	-moz-osx-font-smoothing: grayscale;
@@ -179,7 +179,7 @@ body {
 }
 
 .editor-post-title__block {
-	font-size: 18px;
+	font-size: 17px;
 }
 
 p {
@@ -213,14 +213,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
 
@@ -242,7 +242,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -250,13 +250,13 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	letter-spacing: normal;
 }
 
 figcaption {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -307,7 +307,7 @@ object {
 	color: white;
 	font-weight: 600;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.75019em;
+	font-size: 0.83333em;
 	line-height: 1;
 	background-color: black;
 	padding: 11.6px 11.6px;
@@ -359,7 +359,7 @@ object {
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 4.20873em;
+	font-size: 2.48832em;
 	letter-spacing: normal;
 	line-height: 1;
 	padding: 0;
@@ -394,37 +394,37 @@ object {
 }
 
 .wp-block-heading h1, h1, .h1 {
-	font-size: 5.61023em;
+	font-size: 2.98598em;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 .wp-block-heading h2, h2, .h2 {
-	font-size: 4.20873em;
+	font-size: 2.48832em;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 .wp-block-heading h3, h3, .h3 {
-	font-size: 3.15733em;
+	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 .wp-block-heading h4, h4, .h4 {
-	font-size: 2.36859em;
+	font-size: 1.728em;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 .wp-block-heading h5, h5, .h5 {
-	font-size: 1.77689em;
+	font-size: 1.44em;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 .wp-block-heading h6, h6, .h6 {
-	font-size: 1.333em;
+	font-size: 1.2em;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -474,7 +474,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859em;
+	font-size: 1.728em;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -487,7 +487,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
 	color: #767676;
-	font-size: 0.75019em;
+	font-size: 0.83333em;
 	letter-spacing: normal;
 }
 
@@ -532,7 +532,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote p {
-	font-size: 2.36859em;
+	font-size: 1.728em;
 	letter-spacing: normal;
 }
 
@@ -542,7 +542,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
-	font-size: 3.15733em;
+	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -594,7 +594,7 @@ table th,
 	color: #444444;
 	font-family: "EB Garamond", serif;
 	font-weight: 200;
-	font-size: 4.20873em;
+	font-size: 2.48832em;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -705,32 +705,32 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.75019em;
+	font-size: 0.83333em;
 }
 
 .is-regular-text,
 .has-regular-font-size,
 .has-normal-font-size,
 .has-medium-font-size {
-	font-size: 1.333em;
+	font-size: 1.2em;
 }
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.77689em;
+	font-size: 1.44em;
 	line-height: 1;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 2.36859em;
+	font-size: 1.728em;
 	line-height: 1;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
-	font-size: calc(2 * 5.61023em);
+	font-size: calc(2 * 2.98598em);
 	font-weight: 200;
 }
 
diff --git a/coutoire/style-rtl.css b/coutoire/style-rtl.css
index 9961c89f1..f2b7ea12e 100644
--- a/coutoire/style-rtl.css
+++ b/coutoire/style-rtl.css
@@ -588,7 +588,7 @@ html {
  * HTML resets
  */
 html {
-	font-size: 13.50338px;
+	font-size: 15px;
 	font-family: "Work Sans", sans-serif;
 	line-height: 1.78;
 }
@@ -646,7 +646,7 @@ a {
 	clip-path: none;
 	color: #444444;
 	display: block;
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 	font-weight: bold;
 	height: auto;
 	right: 5px;
@@ -912,14 +912,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
 
@@ -941,7 +941,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -949,7 +949,7 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	letter-spacing: normal;
 }
 
@@ -1012,7 +1012,7 @@ input[type=checkbox] + label {
 
 figcaption {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -1078,7 +1078,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 600;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	background-color: black;
 	border-width: 0;
 	padding: 11.6px 11.6px;
@@ -1152,7 +1152,7 @@ input.has-focus[type="submit"],
 
 .wp-block-code {
 	color: #444444;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	padding: 16px;
 	border-color: #DDDDDD;
 }
@@ -1231,7 +1231,7 @@ input.has-focus[type="submit"],
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 4.20873rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 	max-width: inherit;
@@ -1279,7 +1279,7 @@ input.has-focus[type="submit"],
 .wp-block-file .wp-block-file__button {
 	background-color: black;
 	color: white;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	margin-right: 16px;
 	margin-left: 16px;
 }
@@ -1304,7 +1304,7 @@ input.has-focus[type="submit"],
 .wp-block-gallery .blocks-gallery-item figcaption {
 	margin: 0;
 	color: white;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 }
 
 .wp-block-gallery .blocks-gallery-image,
@@ -1378,44 +1378,44 @@ h6, .h6 {
 }
 
 h1, .h1 {
-	font-size: 5.61023rem;
+	font-size: 2.98598rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h2, .h2 {
-	font-size: 4.20873rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h3, .h3 {
-	font-size: 3.15733rem;
+	font-size: 2.0736rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h4, .h4 {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h5, .h5 {
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h6, .h6 {
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 .wp-block-image figcaption {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -1433,7 +1433,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1.78;
 	/* Vertical margins logic */
 	margin-top: 32px;
@@ -1454,11 +1454,11 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1.78;
 	margin: 0;
 }
@@ -1483,19 +1483,19 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	font-weight: 200;
 	line-height: 1;
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	line-height: 1.78;
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1.78;
 	margin: 0;
 }
@@ -1633,7 +1633,7 @@ p.has-background:not(.has-background-background-color) a {
 	background-color: black;
 	font-family: "EB Garamond", serif;
 	font-weight: bold;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1;
 	padding: calc(0.5 * 16px) calc(0.66 * 16px);
 }
@@ -1669,7 +1669,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a {
@@ -1705,7 +1705,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -1718,7 +1718,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 	display: block;
 }
@@ -1780,7 +1780,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -1789,7 +1789,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-quote cite,
 .wp-block-quote footer {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
 
@@ -1804,7 +1804,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote.is-style-large p, .wp-block-quote.is-large p {
-	font-size: 3.15733rem;
+	font-size: 2.0736rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -1815,7 +1815,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
 
@@ -1838,9 +1838,9 @@ hr.is-style-wide {
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
 	color: #DDDDDD;
-	font-size: 2.36859rem;
-	letter-spacing: 0.75019rem;
-	padding-right: 0.75019rem;
+	font-size: 1.728rem;
+	letter-spacing: 0.83333rem;
+	padding-right: 0.83333rem;
 }
 
 .wp-block-jetpack-slideshow ul {
@@ -1883,7 +1883,7 @@ table th,
 
 .wp-block-video figcaption {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -2043,32 +2043,32 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 .is-regular-text,
 .has-regular-font-size,
 .has-normal-font-size,
 .has-medium-font-size {
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 }
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	line-height: 1;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	line-height: 1;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
-	font-size: calc(2 * 5.61023rem);
+	font-size: calc(2 * 2.98598rem);
 	font-weight: 200;
 	line-height: 0.66;
 	text-transform: uppercase;
@@ -2109,7 +2109,7 @@ table th,
 .site-title {
 	color: black;
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2130,7 +2130,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 2.48832rem;
 }
 
 .main-navigation {
@@ -2277,7 +2277,7 @@ table th,
 	color: black;
 	display: block;
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	font-weight: 600;
 	padding: 10px;
 }
@@ -2313,7 +2313,7 @@ table th,
 	.main-navigation > div > ul > .menu-item-has-children > a::after {
 		content: "\00a0\25BC";
 		display: inline-block;
-		font-size: 0.75019rem;
+		font-size: 0.69444rem;
 		height: inherit;
 		width: inherit;
 	}
@@ -2363,7 +2363,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 @media only screen and (min-width: 640px) {
@@ -2430,7 +2430,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	font-weight: 600;
 	padding: 10px;
 	color: currentColor;
@@ -2445,7 +2445,7 @@ table th,
 }
 
 .entry-title {
-	font-size: 4.20873rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2455,7 +2455,7 @@ table th,
 	color: #767676;
 	clear: both;
 	float: none;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	display: block;
 }
 
@@ -2554,17 +2554,17 @@ table th,
 }
 
 .author-bio .author-title {
-	font-size: 3.15733rem;
+	font-size: 2.0736rem;
 }
 
 /* Next/Previous navigation */
 .post-navigation .meta-nav {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 .post-navigation .post-title {
 	font-family: "EB Garamond", serif;
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	font-weight: 600;
 }
 
@@ -2591,7 +2591,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "EB Garamond", serif;
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
 	padding-left: calc(0.66 * 16px);
@@ -2639,12 +2639,12 @@ table th,
  * Comment Title
  */
 .comments-title {
-	font-size: 3.15733rem;
+	font-size: 2.0736rem;
 	letter-spacing: normal;
 }
 
 .comment-reply-title {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -2746,7 +2746,7 @@ table th,
 
 .comment-metadata,
 .reply {
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	line-height: 1;
 }
 
@@ -2874,7 +2874,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "EB Garamond", serif;
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 	font-weight: 600;
 }
 
@@ -2906,13 +2906,13 @@ img#wpstats {
 	background-color: black;
 	font-family: "EB Garamond", serif;
 	font-weight: bold;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1;
 	padding: calc(0.5 * 16px) calc(0.66 * 16px);
 }
 
 .page-title {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 }
 
 /**
@@ -3271,7 +3271,11 @@ a:hover, a:focus {
 	font-family: "Work Sans", sans-serif;
 }
 
-.page-header .page-title {
+#main .page-header {
+	margin-top: 32px;
+}
+
+#main .page-header .page-title {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
 	font-weight: 500;
@@ -3282,7 +3286,7 @@ a:hover, a:focus {
 .entry-title,
 .post-navigation .post-title,
 .comment-reply-title {
-	font-size: 2.36859rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 	text-transform: uppercase;
@@ -3353,7 +3357,7 @@ input[type="submit"],
 	}
 	.site-title,
 	.site-description {
-		font-size: 1.77689rem;
+		font-size: 1.44rem;
 		hyphens: auto;
 	}
 	#toggle-menu {
diff --git a/coutoire/style.css b/coutoire/style.css
index 765ec0130..34bc18ecb 100644
--- a/coutoire/style.css
+++ b/coutoire/style.css
@@ -588,14 +588,14 @@ html {
  * HTML resets
  */
 html {
-	font-size: 13.50338px;
+	font-size: 14.16667px;
 	font-family: "Work Sans", sans-serif;
 	line-height: 1.78;
 }
 
 @media only screen and (min-width: 560px) {
 	html {
-		font-size: 18px;
+		font-size: 17px;
 	}
 }
 
@@ -646,7 +646,7 @@ a {
 	clip-path: none;
 	color: #444444;
 	display: block;
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 	font-weight: bold;
 	height: auto;
 	left: 5px;
@@ -912,14 +912,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
 
@@ -941,7 +941,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -949,7 +949,7 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	letter-spacing: normal;
 }
 
@@ -1012,7 +1012,7 @@ input[type=checkbox] + label {
 
 figcaption {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -1078,7 +1078,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 600;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	background-color: black;
 	border-width: 0;
 	padding: 11.6px 11.6px;
@@ -1152,7 +1152,7 @@ input.has-focus[type="submit"],
 
 .wp-block-code {
 	color: #444444;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	padding: 16px;
 	border-color: #DDDDDD;
 }
@@ -1231,7 +1231,7 @@ input.has-focus[type="submit"],
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 4.20873rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 	max-width: inherit;
@@ -1279,7 +1279,7 @@ input.has-focus[type="submit"],
 .wp-block-file .wp-block-file__button {
 	background-color: black;
 	color: white;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	margin-left: 16px;
 	margin-right: 16px;
 }
@@ -1304,7 +1304,7 @@ input.has-focus[type="submit"],
 .wp-block-gallery .blocks-gallery-item figcaption {
 	margin: 0;
 	color: white;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 }
 
 .wp-block-gallery .blocks-gallery-image,
@@ -1378,44 +1378,44 @@ h6, .h6 {
 }
 
 h1, .h1 {
-	font-size: 5.61023rem;
+	font-size: 2.98598rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h2, .h2 {
-	font-size: 4.20873rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h3, .h3 {
-	font-size: 3.15733rem;
+	font-size: 2.0736rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h4, .h4 {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h5, .h5 {
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 h6, .h6 {
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
 
 .wp-block-image figcaption {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -1433,7 +1433,7 @@ img {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1.78;
 	/* Vertical margins logic */
 	margin-top: 32px;
@@ -1454,11 +1454,11 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1.78;
 	margin: 0;
 }
@@ -1483,19 +1483,19 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	font-weight: 200;
 	line-height: 1;
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-date {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	line-height: 1.78;
 }
 
 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1.78;
 	margin: 0;
 }
@@ -1633,7 +1633,7 @@ p.has-background:not(.has-background-background-color) a {
 	background-color: black;
 	font-family: "EB Garamond", serif;
 	font-weight: bold;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1;
 	padding: calc(0.5 * 16px) calc(0.66 * 16px);
 }
@@ -1669,7 +1669,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .a8c-posts-list__item .a8c-posts-list-item__meta {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a {
@@ -1705,7 +1705,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -1718,7 +1718,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 	display: block;
 }
@@ -1780,7 +1780,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -1789,7 +1789,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-quote cite,
 .wp-block-quote footer {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
 
@@ -1804,7 +1804,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote.is-style-large p, .wp-block-quote.is-large p {
-	font-size: 3.15733rem;
+	font-size: 2.0736rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -1815,7 +1815,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	letter-spacing: normal;
 }
 
@@ -1838,9 +1838,9 @@ hr.is-style-wide {
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
 	color: #DDDDDD;
-	font-size: 2.36859rem;
-	letter-spacing: 0.75019rem;
-	padding-left: 0.75019rem;
+	font-size: 1.728rem;
+	letter-spacing: 0.83333rem;
+	padding-left: 0.83333rem;
 }
 
 .wp-block-jetpack-slideshow ul {
@@ -1883,7 +1883,7 @@ table th,
 
 .wp-block-video figcaption {
 	color: #767676;
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -2048,32 +2048,32 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 .is-regular-text,
 .has-regular-font-size,
 .has-normal-font-size,
 .has-medium-font-size {
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 }
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	line-height: 1;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	line-height: 1;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
-	font-size: calc(2 * 5.61023rem);
+	font-size: calc(2 * 2.98598rem);
 	font-weight: 200;
 	line-height: 0.66;
 	text-transform: uppercase;
@@ -2114,7 +2114,7 @@ table th,
 .site-title {
 	color: black;
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2135,7 +2135,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "EB Garamond", serif;
-	font-size: 2.36859rem;
+	font-size: 2.48832rem;
 }
 
 .main-navigation {
@@ -2282,7 +2282,7 @@ table th,
 	color: black;
 	display: block;
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	font-weight: 600;
 	padding: 10px;
 }
@@ -2318,7 +2318,7 @@ table th,
 	.main-navigation > div > ul > .menu-item-has-children > a::after {
 		content: "\00a0\25BC";
 		display: inline-block;
-		font-size: 0.75019rem;
+		font-size: 0.69444rem;
 		height: inherit;
 		width: inherit;
 	}
@@ -2368,7 +2368,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 @media only screen and (min-width: 640px) {
@@ -2435,7 +2435,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	font-weight: 600;
 	padding: 10px;
 	color: currentColor;
@@ -2450,7 +2450,7 @@ table th,
 }
 
 .entry-title {
-	font-size: 4.20873rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2460,7 +2460,7 @@ table th,
 	color: #767676;
 	clear: both;
 	float: none;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	display: block;
 }
 
@@ -2559,17 +2559,17 @@ table th,
 }
 
 .author-bio .author-title {
-	font-size: 3.15733rem;
+	font-size: 2.0736rem;
 }
 
 /* Next/Previous navigation */
 .post-navigation .meta-nav {
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 }
 
 .post-navigation .post-title {
 	font-family: "EB Garamond", serif;
-	font-size: 1.77689rem;
+	font-size: 1.44rem;
 	font-weight: 600;
 }
 
@@ -2596,7 +2596,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "EB Garamond", serif;
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
 	padding-right: calc(0.66 * 16px);
@@ -2644,12 +2644,12 @@ table th,
  * Comment Title
  */
 .comments-title {
-	font-size: 3.15733rem;
+	font-size: 2.0736rem;
 	letter-spacing: normal;
 }
 
 .comment-reply-title {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -2751,7 +2751,7 @@ table th,
 
 .comment-metadata,
 .reply {
-	font-size: 0.75019rem;
+	font-size: 0.69444rem;
 	line-height: 1;
 }
 
@@ -2879,7 +2879,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "EB Garamond", serif;
-	font-size: 1.333rem;
+	font-size: 1.2rem;
 	font-weight: 600;
 }
 
@@ -2911,13 +2911,13 @@ img#wpstats {
 	background-color: black;
 	font-family: "EB Garamond", serif;
 	font-weight: bold;
-	font-size: 0.75019rem;
+	font-size: 0.83333rem;
 	line-height: 1;
 	padding: calc(0.5 * 16px) calc(0.66 * 16px);
 }
 
 .page-title {
-	font-size: 2.36859rem;
+	font-size: 1.728rem;
 }
 
 /**
@@ -3220,7 +3220,7 @@ img#wpstats {
  * Elements
  */
 html {
-	font-size: 18px;
+	font-size: 17px;
 }
 
 body {
@@ -3276,7 +3276,11 @@ a:hover, a:focus {
 	font-family: "Work Sans", sans-serif;
 }
 
-.page-header .page-title {
+#main .page-header {
+	margin-top: 32px;
+}
+
+#main .page-header .page-title {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
 	font-weight: 500;
@@ -3287,7 +3291,7 @@ a:hover, a:focus {
 .entry-title,
 .post-navigation .post-title,
 .comment-reply-title {
-	font-size: 2.36859rem;
+	font-size: 2.48832rem;
 	letter-spacing: normal;
 	line-height: 1;
 	text-transform: uppercase;
@@ -3358,7 +3362,7 @@ input[type="submit"],
 	}
 	.site-title,
 	.site-description {
-		font-size: 1.77689rem;
+		font-size: 1.44rem;
 		hyphens: auto;
 	}
 	#toggle-menu {