Spacing and typography

assets/css/screen.css

@@ -64,9 +64,9 @@ X. Footer
     --font-serif: "EB Garamond", Georgia, Times, serif;
     --font-slab: "Roboto Slab", Georgia, Times, serif;
     --font-mono: Menlo, Courier, monospace;
-    --container-width: 1280px;
+    --container-width: 1320px;
     --container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
-    --grid-gap: 40px;
+    --grid-gap: 48px;
 }
 
 :root.has-light-text,
@@ -279,7 +279,7 @@ a:hover {
 
 .gh-navigation {
     height: 100px;
-    font-size: 1.5rem;
+    font-size: 1.6rem;
     font-weight: 550;
     color: var(--color-darker-gray);
 }
@@ -320,7 +320,7 @@ a:hover {
 
 .gh-navigation .nav {
     display: inline-flex;
-    gap: 24px;
+    gap: 28px;
     align-items: center;
     padding: 0;
     margin: 0;
@@ -415,7 +415,7 @@ LOGO   Home About Collection Author Portal             Login Subscribe
 
 @media (min-width: 992px) {
     .gh-navigation.is-left-logo .gh-navigation-menu {
-        margin-right: 64px;
+        margin-right: 100px;
         margin-left: 16px;
     }
 }
@@ -742,7 +742,7 @@ Search                         LOGO                    Login Subscribe
 .gh-card-link {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 20px;
 }
 
 .gh-card-link:hover {
@@ -777,9 +777,9 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-card-title {
-    font-size: 2rem;
+    font-size: 2.2rem;
-    font-weight: 725;
+    font-weight: 800;
-    letter-spacing: -0.017em;
+    letter-spacing: -0.014em;
 }
 
 .gh-card-link:hover .gh-card-title {
@@ -789,10 +789,10 @@ Search                         LOGO                    Login Subscribe
 .gh-card-excerpt {
     display: -webkit-box;
     overflow-y: hidden;
-    margin-top: 6px;
+    margin-top: 10px;
     max-width: 720px;
-    font-size: 1.6rem;
+    font-size: 1.5rem;
-    line-height: 1.35;
+    line-height: 1.4;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
@@ -804,12 +804,12 @@ Search                         LOGO                    Login Subscribe
     font-size: 1.3rem;
     font-weight: 550;
     line-height: 1.05;
-    letter-spacing: -0.0025em;
+    letter-spacing: -0.004em;
     color: var(--color-secondary-text);
 }
 
 .gh-card-meta:not(:empty) {
-    margin-top: 8px;
+    margin-top: 12px;
 }
 
 .gh-card-author + .gh-card-date::before {
@@ -866,7 +866,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-link {
-    gap: 20px;
+    gap: 28px;
 }
 
 .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-image {
@@ -875,7 +875,7 @@ Search                         LOGO                    Login Subscribe
 
 .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-tag {
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
 }
 
 .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
@@ -886,8 +886,8 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
-    margin-top: 10px;
+    margin-top: 20px;
-    font-size: 1.7rem;
+    font-size: 1.8rem;
 }
 
 .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta:not(:empty) {
@@ -942,12 +942,12 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-header.is-highlight .gh-card:first-child .gh-card-link {
-    gap: 24px;
+    gap: 28px;
 }
 
 .gh-header.is-highlight .gh-card:first-child .gh-card-tag {
     display: block;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
 }
 
 .gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-title {
@@ -959,8 +959,8 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-excerpt {
-    margin-top: 10px;
+    margin-top: 20px;
-    font-size: 1.7rem;
+    font-size: 1.8rem;
 }
 
 .gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-meta:not(:empty) {
@@ -1154,20 +1154,28 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-featured-feed .gh-card-image {
-    width: 80px;
+    width: 72px;
     aspect-ratio: 1;
 }
 
 .gh-featured-feed .gh-card-title {
+    display: -webkit-box;
+    overflow-y: hidden;
     font-size: 1.6rem;
-    font-weight: 700;
+    font-weight: 725;
     letter-spacing: -0.011em;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
 }
 
 .gh-featured-feed .gh-card-excerpt {
     display: none;
 }
 
+.gh-featured-feed .gh-card-meta:not(:empty) {
+    margin-top: 10px;
+}
+
 .gh-featured-feed .gh-card + .gh-card::before {
     position: absolute;
     top: 0;
@@ -1224,7 +1232,7 @@ Search                         LOGO                    Login Subscribe
 
 .gh-container-title {
     grid-column: 1 / -1;
-    margin-bottom: 20px;
+    margin-bottom: calc(var(--grid-gap) / 2);
     padding-bottom: 12px;
     font-size: 1.2rem;
     font-weight: 500;
@@ -1238,7 +1246,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-container .gh-card-meta:not(:empty) {
-    margin-top: 14px;
+    margin-top: 16px;
 }
 
 /* 11.1. List style */
@@ -1264,6 +1272,10 @@ Search                         LOGO                    Login Subscribe
     max-width: 600px;
 }
 
+.gh-container.is-list .gh-card-excerpt {
+    font-size: 1.6rem;
+}
+
 .gh-container.is-list .gh-card::before {
     position: absolute;
     top: calc(var(--grid-gap) / -2);
@@ -1287,7 +1299,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-container.is-grid .gh-card-excerpt {
-    -webkit-line-clamp: 3;
+    -webkit-line-clamp: 4;
 }
 
 .gh-container.is-grid .gh-card::before {
@@ -2078,8 +2090,8 @@ figcaption a {
 /* ---------------------------------------------------------- */
 
 .gh-footer {
-    margin-top: 64px;
+    margin-top: 120px;
-    font-size: 1.5rem;
+    font-size: 1.6rem;
     color: var(--color-darker-gray);
 }
 
@@ -2118,7 +2130,7 @@ figcaption a {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
-    padding-block: 24px;
+    padding-block: 28px;
     font-weight: 550;
     border-block: 1px solid var(--color-border);
 }
@@ -2153,7 +2165,7 @@ figcaption a {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-block: 80px 100px;
+    padding-block: 80px 120px;
 }
 
 .gh-footer-signup-header {
@@ -2163,7 +2175,7 @@ figcaption a {
 }
 
 .gh-footer-signup-subhead {
-    margin-top: 4px;
+    margin-top: 8px;
     font-size: clamp(1.6rem, 0.68vw + 1.33rem, 2.2rem);
     font-weight: 450;
     letter-spacing: -0.018em;
@@ -2171,7 +2183,7 @@ figcaption a {
 }
 
 .gh-footer-signup .gh-button {
-    margin-top: 24px;
+    margin-top: 28px;
     padding: 16px 32px;
     font-size: 1.9rem;
     letter-spacing: -0.01em;