ghost 4.47.3 → 5.0.0

package/content/themes/casper/assets/css/screen.css

@@ -8,8 +8,6 @@ production stylesheet in assets/built/screen.css
 2.  Layout
 3.  Special Templates
 4.  Site Header
-  4.1 Home header
-  4.2 Archive header
 5.  Site Navigation
 6.  Post Feed
 7.  Single Post
@@ -38,7 +36,9 @@ production stylesheet in assets/built/screen.css
     --color-red: #f05230;
     --color-darkgrey: #15171A;
     --color-midgrey: #738a94;
-    --color-lightgrey: #c5d2d9;
+    --color-lightgrey: #f1f1f1;
+    --color-secondary-text: #979797;
+    --color-border: #e1e1e1;
     --color-wash: #e5eff5;
     --color-darkmode: #151719;
 
@@ -52,7 +52,7 @@ production stylesheet in assets/built/screen.css
      */
 
     /* Fonts */
-    --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     --font-serif: Georgia, Times, serif;
     --font-mono: Menlo, Courier, monospace;
 
@@ -75,7 +75,7 @@ production stylesheet in assets/built/screen.css
 /* Full width page blocks */
 .outer {
     position: relative;
-    padding: 0 4vmin;
+    padding: 0 max(4vmin, 20px);
 }
 
 /* Centered content container blocks */
@@ -110,60 +110,141 @@ production stylesheet in assets/built/screen.css
     position: relative;
     z-index: 100;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    padding: 6vw 3vw;
-    min-height: 200px;
-    max-height: 340px;
+    padding-top: 6.4vmin;
+    padding-bottom: 6.4vmin;
     text-align: center;
+    color: var(--color-darkgrey);
+}
+
+.has-cover-image .site-header-content {
+    min-height: 560px;
+    background-color: var(--ghost-accent-color);
+    color: #fff;
+}
+
+body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
+    padding-bottom: max(4.8vmin, 24px);
+}
+
+.site-header-content.left-aligned {
+    padding-bottom: 0;
+    text-align: left;
+}
+
+.has-cover-image .site-header-content.left-aligned {
+    align-items: flex-end;
+    padding-bottom: 6.4vmin;
+}
+
+.site-header-content.no-content {
+    padding-top: 0;
+}
+
+.site-header-inner {
+    position: relative;
+}
+
+.site-header-content.left-aligned .site-header-inner {
+    align-items: flex-start;
+}
+
+.site-logo {
+    flex-shrink: 0;
+    margin: 0 auto;
+    max-height: 120px;
+}
+
+.site-header-content.left-aligned .site-logo {
+    margin-right: auto;
+    margin-left: 0;
+    max-height: 96px;
 }
 
 .site-title {
     z-index: 10;
-    margin: 0 0 0.15em;
+    margin: 0;
     padding: 0;
+    font-size: 5rem;
+    font-weight: 800;
 }
 
-.site-logo {
-    max-height: 55px;
+.has-serif-title .site-title {
+    font-family: var(--font-serif);
 }
 
-.site-header-content p {
-    z-index: 10;
-    max-width: 600px;
-    margin: 0 auto;
-    line-height: 1.2em;
-    opacity: 0.8;
+.has-cover-image .site-title {
+    font-size: 6rem;
 }
 
-@media (max-width: 600px) {
-    .site-header-content p {
-        max-width: 80vmin;
-        font-size: 1.8rem;
-    }
+.site-header-content.left-aligned .site-title {
+    font-size: 4.4rem;
 }
 
-/* 4.1 Home header
-/* ---------------------------------------------------------- */
+.has-cover-image .site-header-content.left-aligned .site-title {
+    font-size: 4.6rem;
+}
 
-.site-home-header {
-    position: relative;
-    z-index: 1000;
-    overflow: hidden;
+.site-description {
+    display: inline-block;
+    z-index: 10;
+    max-width: 560px;
+    font-size: 2.4rem;
+    font-weight: 500;
+    line-height: 1.4;
 }
 
-.site-header-content {
-    padding: 18vmin 4vmin;
-    font-size: 2.5rem;
+:is(.site-logo, .site-title) + .site-description {
+    margin-top: 8px;
+    font-size: 2.1rem;
     font-weight: 400;
+}
+
+.site-logo + .site-description {
+    margin-top: 20px;
+}
+
+.site-title + .site-description {
+    color: var(--color-secondary-text);
+}
+
+.has-cover-image .site-description {
+    font-size: 3.2rem;
+    letter-spacing: -0.005em;
     color: #fff;
-    background: var(--ghost-accent-color);
 }
 
-.site-header-content.large {
-    padding-top: 28vmin;
-    padding-bottom: 28vmin;
+.has-cover-image :is(.site-logo, .site-title) + .site-description {
+    font-size: 2.4rem;
+}
+
+.has-cover-image .site-header-content.left-aligned :is(.site-logo, .site-title) + .site-description {
+    font-size: 2.2rem;
+}
+
+@media (max-width: 767px) {
+    .has-cover-image .site-header-content {
+        padding-bottom: 36px;
+        min-height: 240px;
+    }
+    .site-header-inner {
+        gap: 16px;
+    }
+    .site-logo {
+        max-width: 60%;
+    }
+    .site-title {
+        font-size: 3.4rem !important;
+    }
+    .site-description {
+        font-size: 1.9rem !important;
+    }
+    .site-logo + .site-description {
+        margin-top: 12px !important;
+    }
+    .site-title + .site-description {
+        margin-top: 4px !important;
+    }
 }
 
 
@@ -171,21 +252,35 @@ production stylesheet in assets/built/screen.css
 /* ---------------------------------------------------------- */
 
 .gh-head {
-    padding: 1vmin 4vmin;
+    padding-top: min(24px, 3.6vmin);
+    padding-bottom: min(24px, 3.6vmin);
     font-size: 1.6rem;
     line-height: 1.3em;
+    background-color: #fff;
+}
+
+.has-cover-image:not(.home-template) .gh-head {
+    background-color: var(--ghost-accent-color);
+    color: #fff;
+}
+
+.home-template.has-cover-image .gh-head {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 2000;
+    background-color: transparent;
     color: #fff;
-    background: var(--ghost-accent-color);
 }
 
 .gh-head a {
-    color: inherit;
     text-decoration: none;
 }
 
 .gh-head-inner {
     display: grid;
-    grid-gap: 2.5vmin;
+    grid-gap: 40px;
     grid-template-columns: auto auto 1fr;
     grid-auto-flow: row dense;
 }
@@ -198,18 +293,28 @@ production stylesheet in assets/built/screen.css
     display: flex;
     align-items: center;
     height: 40px;
-    max-width: 200px;
-    text-align: center;
+    max-width: 400px;
     word-break: break-all;
 }
 
 .gh-head-logo {
     display: block;
-    padding: 10px 0;
-    font-weight: 700;
-    font-size: 2rem;
-    line-height: 1.2em;
+    font-weight: 800;
+    font-size: 2.6rem;
     letter-spacing: -0.02em;
+    color: inherit;
+}
+
+.gh-head-logo.no-image {
+    margin-top: -2px;
+}
+
+.has-cover-image .gh-head-logo {
+    color: #fff;
+}
+
+.no-logo .gh-head-logo {
+    display: none;
 }
 
 .gh-head-logo img {
@@ -223,31 +328,33 @@ production stylesheet in assets/built/screen.css
 .gh-head-menu {
     display: flex;
     align-items: center;
+    margin-top: 1px;
     font-weight: 500;
 }
 
+.no-logo .gh-head-menu {
+    margin-left: -40px;
+}
+
 .gh-head-menu .nav {
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
+    gap: 32px;
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
 .gh-head-menu .nav li {
-    margin: 0 2.5vmin 0 0;
+    margin: 0;
     padding: 0;
 }
 
 .gh-head-menu .nav a {
     display: inline-block;
-    padding: 5px 0;
-    opacity: 0.8
-}
-
-.gh-head-menu .nav a:hover {
-    opacity: 1;
+    line-height: 1.7;
+    color: inherit;
 }
 
 
@@ -262,56 +369,22 @@ production stylesheet in assets/built/screen.css
     text-align: right;
 }
 
-.gh-head-actions-list {
+.gh-head-button {
     display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
     align-items: center;
+    padding: 8px 16px;
+    height: 40px;
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    font-size: 1.5rem;
+    border-radius: 6px;
+    color: #fff;
+    background: var(--ghost-accent-color);
 }
 
-.gh-head-actions-list a:not([class]) {
-    display: inline-block;
-    margin: 0 0 0 1.5vmin;
-    padding: 5px 0;
-}
-
-.gh-social {
-    margin: 0 1.5vmin 0 0;
-}
-
-.gh-social a {
-    opacity: 0.8
-}
-
-.gh-social a + a {
-    margin-left: 0.8rem;
-}
-
-.gh-social a:hover {
-    opacity: 1;
-}
-
-.gh-social svg {
-    height: 22px;
-    width: 22px;
-    fill: #fff;
-}
-
-.gh-social-facebook svg {
-    height: 20px;
-    width: 20px;
-}
-
-a.gh-head-button {
-    display: block;
-    padding: 8px 15px;
-    color: var(--button-text-color, var(--color-darkgrey));
-    font-weight: 500;
-    letter-spacing: -0.015em;
-    font-size: 1.5rem;
-    line-height: 1em;
-    background: var(--button-bg-color, #fff);
-    border-radius: 30px;
+.has-cover-image .gh-head-button {
+    color: var(--color-darkgrey);
+    background: #fff;
 }
 
 
@@ -333,6 +406,10 @@ a.gh-head-button {
     height: 33px;
 }
 
+.has-cover-image .gh-burger-box {
+    color: #fff;
+}
+
 .gh-burger-inner {
     width: 100%;
     height: 100%;
@@ -404,12 +481,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 /* ---------------------------------------------------------- */
 /* IDs needed to ensure sufficient specificity */
 
-@media (max-width: 900px) {
+@media (max-width: 991px) {
     .gh-burger {
         display: inline-block;
     }
     #gh-head {
-        transition: all 0.4s ease-out;
         overflow: hidden;
     }
     #gh-head .gh-head-inner {
@@ -426,7 +502,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
         justify-content: space-between;
         user-select: none;
     }
-    .home-template #gh-head.has-cover .gh-head-brand {
+    .no-logo #gh-head .gh-head-brand {
         justify-content: flex-end;
     }
     #gh-head .gh-head-menu {
@@ -440,16 +516,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
         font-size: 3.6rem;
         line-height: 1.1em;
     }
-    #gh-head .gh-head-menu .nav li {
-        margin: 5px 0;
-    }
-    #gh-head .gh-head-menu .nav a {
-        padding: 8px 0;
-    }
     #gh-head .gh-head-menu .nav {
         display: flex;
         flex-direction: column;
         align-items: center;
+        gap: 16px;
+        font-weight: 500;
     }
     #gh-head .gh-head-actions {
         padding: 20px 0;
@@ -493,29 +565,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     }
 }
 
-.home-template .gh-head.has-cover {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 2000;
-}
-
-.home-template .gh-head.has-cover {
-    background: transparent;
-}
-
-.home-template.gh-head-open .gh-head {
+.has-cover-image.gh-head-open .gh-head {
     background: var(--ghost-accent-color);
 }
 
-.home-template .gh-head.has-cover .gh-head-logo {
-    display: none;
-}
-.home-template .gh-head.has-cover .gh-head-menu {
-    margin-left: -2.5vmin;
-}
-
 
 /* 6. Post Feed
 /* ---------------------------------------------------------- */
@@ -523,23 +576,22 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 .post-feed {
     position: relative;
     display: grid;
-    grid-gap: 4vmin;
-    grid-template-columns: 1fr 1fr 1fr;
-    padding: 4vmin 0;
+    gap: 4.8vmin 4vmin;
+    grid-template-columns: repeat(6, 1fr);
+    padding: max(4.8vmin, 36px) 0 0;
 }
 
-.post-feed.list {
-    row-gap: 6vmin;
-    max-width: 940px;
-    margin: 2vmin auto 0;
+:is(.tag-template, .author-template) .post-feed {
+    margin-top: 4vmin;
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 991px) {
     .post-feed {
         grid-template-columns: 1fr 1fr;
     }
 }
-@media (max-width: 700px) {
+
+@media (max-width: 767px) {
     .post-feed {
         grid-template-columns: 1fr;
         grid-gap: 40px;
@@ -548,35 +600,42 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 
 .post-card {
     position: relative;
-    flex: 1 1 301px;
+    grid-column: span 2;
     display: flex;
     flex-direction: column;
-    min-height: 220px;
     background-size: cover;
     word-break: break-word;
 }
 
-@media (max-width: 700px) {
-    .post-card {
-        min-height: auto;
-    }
-}
-
 .post-card-image-link {
     position: relative;
     display: block;
-    overflow: hidden;
-    border-radius: 3px;
+    margin-bottom: 32px;
+}
+
+.post-card-image-link::after {
+    content: "";
+    display: block;
+    padding-bottom: 55%;
+}
+
+.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
+    display: none;
 }
 
 .post-card-image {
+    position: absolute;
+    inset: 0;
     width: 100%;
-    height: 200px;
+    height: 100%;
     background: var(--color-lightgrey) no-repeat center center;
-
     object-fit: cover;
 }
 
+.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image {
+    position: static;
+}
+
 .post-card-content-link {
     position: relative;
     display: block;
@@ -587,10 +646,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     text-decoration: none;
 }
 
-.post-card-header {
-    margin: 20px 0 0;
-}
-
 .post-feed .no-image .post-card-content-link {
     padding: 0;
 }
@@ -600,18 +655,18 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 }
 
 .post-card-primary-tag {
-    margin: 0 0 0.2em;
-    color: var(--ghost-accent-color);
-    font-size: 1.2rem;
-    font-weight: 500;
-    letter-spacing: 0.2px;
-    text-transform: uppercase;
+    margin: 0 0 10px;
+    color: var(--color-secondary-text);
+    font-size: 1.4rem;
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    line-height: 1;
 }
 
 .post-card-title {
-    margin: 0 0 0.4em;
-    font-size: 2.4rem;
-    transition: color 0.2s ease-in-out;
+    margin: 0;
+    font-size: 2.6rem;
+    font-weight: 800;
 }
 
 .no-image .post-card-title {
@@ -620,6 +675,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 
 .has-serif-title .post-card-title {
     font-family: var(--font-serif);
+    letter-spacing: -0.005em;
 }
 
 .post-card-content {
@@ -629,32 +685,43 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 }
 
 .post-card-excerpt {
-    max-width: 56em;
-    color: color-mod(var(--color-midgrey) l(-8%));
-    font-family: var(--font-serif);
-}
-
-.has-sans-body .post-card-excerpt {
-    font-family: var(--font-sans-serif);
-}
-
-.post-card-excerpt p {
-    margin-bottom: 1em;
     display: -webkit-box;
     overflow-y: hidden;
+    margin-top: 12px;
+    max-width: 720px;
+    font-size: 1.6rem;
+    line-height: 1.5;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     word-break: break-word;
 }
 
+.has-sans-body .post-card-excerpt {
+    font-family: var(--font-sans);
+}
+
+.post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image) .post-card-excerpt {
+    -webkit-line-clamp: 2;
+}
+
+:is(.tag-template, .author-template) .post-card-excerpt {
+    margin-top: 6px;
+}
+
 .post-card-meta {
     display: flex;
     align-items: center;
+    margin-top: 12px;
     padding: 0;
+    font-size: 1.3rem;
+    color: var(--color-secondary-text);
+}
+
+.post-card-meta .sep {
+    margin: 0 4px;
 }
 
-.author-profile-image,
-.avatar-wrapper {
+.author-profile-image {
     display: block;
     width: 100%;
     height: 100%;
@@ -664,11 +731,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     object-fit: cover;
 }
 
-.post-card-meta .profile-image-wrapper,
-.post-card-meta .avatar-wrapper {
-    position: relative;
-}
-
 .author-list {
     display: flex;
     flex-wrap: wrap;
@@ -684,69 +746,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     padding: 0;
 }
 
-.static-avatar {
-    display: block;
-    overflow: hidden;
-    margin: 0 0 0 -6px;
-    width: 36px;
-    height: 36px;
-    border-radius: 100%;
-    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
-}
-
-.post-card-byline-content {
-    flex: 1 1 50%;
-    display: flex;
-    flex-direction: column;
-    margin: 0 0 0 8px;
-    color: color-mod(var(--color-midgrey) l(+10%));
-    font-size: 1.4rem;
-    line-height: 1.2em;
-    font-weight: 400;
-}
-
-.post-card-byline-content span {
-    margin: 0;
-}
-
-.post-card-byline-content a {
-    color: color-mod(var(--color-darkgrey) l(+15%));
-    font-weight: 600;
-}
-
-.post-card-byline-date {
-    font-size: 1.3rem;
-    line-height: 1.5em;
-}
-
-.post-card-byline-date .bull {
-    display: inline-block;
-    margin: 0 2px;
-    opacity: 0.6;
-}
-
-.single-author-byline {
-    display: flex;
-    flex-direction: column;
-    margin-left: 5px;
-    color: color-mod(var(--color-midgrey) l(-10%));
-    font-size: 1.3rem;
-    line-height: 1.4em;
-    font-weight: 500;
-}
-
-.single-author {
-    display: flex;
-    align-items: center;
-}
-
-.single-author .static-avatar {
-    margin-left: -2px;
-}
-
-.single-author-name {
-    display: inline-block;
-}
 
 /* Special Styling for home page grid (below):
 
@@ -754,39 +753,14 @@ The first post in the list is styled to be bigger than the others and take over
 the full width of the grid to give it more emphasis. Wrapped in a media query to
 make sure this only happens on large viewports / desktop-ish devices.
 
- */
-
-@media (min-width: 701px) {
-    .post-feed.list .post-card-large {
-        grid-column: 1 / span 3;
-        display: grid;
-        grid-gap: 4vmin;
-        grid-template-columns: 3fr 5fr;
-        min-height: auto;
-        border-top: 0;
-    }
-
-    .post-feed.list .post-card-large.no-image {
-        grid-template-columns: 1fr;
-    }
-
-    .post-feed.list .post-card-large:not(.no-image) .post-card-header {
-        margin-top: 0;
-    }
-
-    .post-feed.list .post-card-large .post-card-content {
-        justify-content: flex-start;
-        margin-top: -6px;
-    }
-}
+*/
 
 @media (min-width: 1001px) {
     .post-card-large {
-        grid-column: 1 / span 3;
+        grid-column: span 6;
         display: grid;
         grid-gap: 4vmin;
-        grid-template-columns: 1fr 1fr 1fr;
-        min-height: 280px;
+        grid-template-columns: repeat(3, 1fr);
         border-top: 0;
     }
 
@@ -796,21 +770,16 @@ make sure this only happens on large viewports / desktop-ish devices.
 
     .post-card-large .post-card-image-link {
         position: relative;
-        grid-column: 1 / span 2;
+        grid-column: span 2;
         margin-bottom: 0;
-        min-height: 380px;
     }
 
-    .post-feed.list .post-card-large .post-card-image-link {
-        grid-column: 1 / span 1;
-        height: max-content;
-        min-height: auto;
+    .post-card-large .post-card-content {
+        grid-column: span 1;
     }
 
-    .post-feed.list .post-card-large .post-card-image-link::after {
-        content: "";
-        display: block;
-        padding-bottom: 60%;
+    .post-card-large.no-image .post-card-content {
+        grid-column: span 2;
     }
 
     .post-card-large .post-card-image {
@@ -819,34 +788,56 @@ make sure this only happens on large viewports / desktop-ish devices.
         height: 100%;
     }
 
-    .post-card-large .post-card-content {
-        justify-content: center;
+    .post-card-large .post-card-primary-tag {
+        margin-bottom: 12px;
     }
 
     .post-card-large .post-card-title {
         margin-top: 0;
-        font-size: 3.2rem;
+        font-size: 4.4rem;
+        line-height: 1;
     }
 
-    .post-feed.list .post-card-large .post-card-title {
-        font-size: 2.4rem;
+    .post-card-large .post-card-excerpt {
+        margin-top: 16px;
     }
 
-    .post-card-large .post-card-excerpt p {
-        font-size: 1.7rem;
-        line-height: 1.55em;
-        -webkit-line-clamp: 8;
+    .post-card-full {
+        grid-column: span 6;
     }
-}
 
+    .post-card-full .post-card-image-link {
+        margin-bottom: 40px;
+    }
 
-@media (max-width: 500px) {
-    .post-card-title {
-        font-size: 1.9rem;
+    .post-card-full .post-card-primary-tag {
+        margin-bottom: 14px;
     }
 
-    .post-card-excerpt {
-        font-size: 1.6rem;
+    .post-card-full .post-card-title {
+        font-size: 6.4rem;
+        line-height: 0.95;
+    }
+
+    .post-card-full .post-card-excerpt {
+        margin-top: 20px;
+        font-size: 1.8rem;
+    }
+
+    .post-card-large + .post-card-large:nth-child(even) {
+        margin: 32px 0;
+    }
+
+    .post-card-large + .post-card-large:nth-child(even) .post-card-content {
+        order: -1;
+    }
+
+    .post-card.dynamic {
+        grid-column: span 3;
+    }
+
+    .post-card.dynamic .post-card-title {
+        font-size: 3rem;
     }
 }
 
@@ -855,33 +846,37 @@ make sure this only happens on large viewports / desktop-ish devices.
 /* ---------------------------------------------------------- */
 
 .article {
-    padding: 8vmin 0;
+    padding: max(8vmin, 40px) 0 max(8vmin, 64px);
     word-break: break-word;
 }
 
+.page-template .article {
+    padding-top: max(12vmin, 64px);
+}
+
 .article-header {
-    padding: 0 0 6vmin 0;
+    padding: 0 0 max(6.4vmin, 40px) 0;
+}
+
+.page-template .article-header {
+    padding-bottom: max(3.2vmin, 28px);
 }
 
 .article-tag {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 0 0 0.5rem;
-    color: var(--color-midgrey);
-    font-size: 1.3rem;
-    line-height: 1.4em;
-    letter-spacing: 0.02em;
-    font-weight: 600;
-    text-transform: uppercase;
+    margin-bottom: 16px;
+    font-size: 1.6rem;
 }
 
 .article-tag a {
-    color: var(--ghost-accent-color);
+    color: var(--color-secondary-text);
 }
 
 .article-title {
-    color: color-mod(var(--color-darkgrey) l(-5%));
+    margin-bottom: 0;
+    font-size: clamp(3.2rem, 5vw, 5.2rem);
+    font-weight: 800;
+    line-height: 1;
+    color: var(--color-darkgrey);
 }
 
 .has-serif-title .article-title {
@@ -889,16 +884,17 @@ make sure this only happens on large viewports / desktop-ish devices.
 }
 
 .article-excerpt {
-    margin: 0 0 1rem;
+    margin-top: 20px;
+    max-width: 720px;
     font-size: 2rem;
-    line-height: 1.4em;
-    opacity: 0.6;
+    line-height: 1.45;
+    color: var(--color-darkgrey);
 }
 
 .gh-canvas .article-image {
     grid-column: wide-start / wide-end;
     width: 100%;
-    margin: 6vmin 0 0;
+    margin: max(6.4vmin, 40px) 0 0;
 }
 
 .image-full .article-image {
@@ -916,9 +912,10 @@ make sure this only happens on large viewports / desktop-ish devices.
     width: 100%;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 767px) {
     .article-excerpt {
-        font-size: 1.8rem;
+        margin-top: 14px;
+        font-size: 1.7rem;
     }
 }
 
@@ -935,7 +932,7 @@ use it for applying any other styles. */
     display: grid;
     grid-template-columns:
         [full-start]
-        minmax(4vmin, auto)
+        minmax(max(4vmin, 20px), auto)
             [wide-start]
             minmax(auto, 240px)
                 [main-start]
@@ -943,7 +940,7 @@ use it for applying any other styles. */
                 [main-end]
             minmax(auto, 240px)
             [wide-end]
-        minmax(4vmin, auto)
+        minmax(max(4vmin, 20px), auto)
         [full-end]
     ;
 }
@@ -974,7 +971,7 @@ headings, text, images and lists. We deal with cards lower down. */
 
 /* Default vertical spacing */
 .gh-content > * + * {
-    margin-top: 4vmin;
+    margin-top: max(3.2vmin, 24px);
     margin-bottom: 0;
 }
 
@@ -1003,11 +1000,11 @@ is the very first element in the post content */
 .gh-content > hr,
 .gh-content > blockquote {
     position: relative;
-    margin-top: 6vmin;
+    margin-top: max(4.8vmin, 32px);
 }
 .gh-content > hr + *,
 .gh-content > blockquote + * {
-    margin-top: 6vmin !important;
+    margin-top: max(4.8vmin, 32px) !important;
 }
 
 /* Now the content typography styles */
@@ -1024,7 +1021,7 @@ is the very first element in the post content */
 .gh-content > p {
     font-family: var(--font-serif);
     font-weight: 400;
-    font-size: 2.1rem;
+    font-size: 2rem;
     line-height: 1.6em;
 }
 
@@ -1125,17 +1122,17 @@ is the very first element in the post content */
     .gh-content .kg-toggle-card .kg-toggle-content > ol,
     .gh-content .kg-toggle-card .kg-toggle-content > ul,
     .gh-content .kg-toggle-card .kg-toggle-content > p {
-        font-size: 1.7rem;
+        font-size: 1.8rem;
     }
 
     .gh-content .kg-product-card .kg-product-card-description > p,
     .gh-content .kg-product-card .kg-product-card-description > ol,
     .gh-content .kg-product-card .kg-product-card-description > ul {
-        font-size: 1.5rem;
+        font-size: 1.6rem;
     }
 
     .gh-content blockquote:not([class])::before {
-        left: -4vmin;
+        left: min(-4vmin, -20px);
     }
 }
 
@@ -1207,7 +1204,6 @@ figcaption {
     padding: 1.5rem 1.5rem 0;
     text-align: center;
     color: rgba(0,0,0,0.5);
-    font-weight: 600;
     font-size: 1.3rem;
     line-height: 1.4em;
 }
@@ -1215,7 +1211,7 @@ figcaption strong {
     color: rgba(0,0,0,0.8);
 }
 figcaption a {
-    color: var(--ghost-accent-color);
+    text-decoration: underline;
 }
 
 
@@ -1285,7 +1281,7 @@ iframe.instagram-media + script + :not([id]) {
     width: auto;
     border-spacing: 0;
     border-collapse: collapse;
-    font-family: var(--font-sans-serif);
+    font-family: var(--font-sans);
     font-size: 1.6rem;
     white-space: nowrap;
     vertical-align: top;
@@ -1335,7 +1331,7 @@ iframe.instagram-media + script + :not([id]) {
 .article-byline {
     display: flex;
     justify-content: space-between;
-    margin: 20px 0 0;
+    margin: min(24px, 5.6vmin) 0 0;
 }
 
 .article-byline-content {
@@ -1346,89 +1342,67 @@ iframe.instagram-media + script + :not([id]) {
 
 .article-byline-content .author-list {
     justify-content: flex-start;
-    padding: 0 12px 0 0;
+    padding: 0 14px 0 0;
 }
 
 .article-byline-meta {
-    color: color-mod(var(--color-midgrey));
+    color: var(--color-secondary-text);
     font-size: 1.4rem;
     line-height: 1.2em;
 }
 
-.article-byline-meta h4 {
-    margin: 0 0 3px;
-    font-size: 1.6rem;
+.article-byline-meta .author-name {
+    margin: 0 0 6px;
+    font-size: 1.7rem;
+    font-weight: 700;
 }
 
 .article-byline-meta .bull {
     display: inline-block;
     margin: 0 2px;
-    opacity: 0.6;
 }
 
 .author-avatar {
     display: block;
     overflow: hidden;
     margin: 0 -4px;
-    width: 50px;
-    height: 50px;
+    width: min(56px, 13.6vmin);
+    height: min(56px, 13.6vmin);
     border: #fff 2px solid;
-    border-radius: 100%;
-    transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
-}
-
-.basic-info .avatar-wrapper {
-    position: relative;
-    margin: 0;
-    width: 60px;
-    height: 60px;
-    border: none;
-    background: rgba(229, 239, 245, 0.1);
-}
-
-.basic-info .avatar-wrapper svg {
-    margin: 0;
-    width: 60px;
-    height: 60px;
-    opacity: 0.15;
+    border-radius: 50%;
+    background-color: var(--color-border);
 }
 
 .page-template .article-title {
     margin-bottom: 0;
 }
 
+@media (max-width: 767px) {
+    .article-byline-content .author-list {
+        padding-right: 12px;
+    }
+    .article-byline-meta .author-name {
+        margin-bottom: 4px;
+    }
+}
+
 
 /* 7.3. Subscribe
 /* ---------------------------------------------------------- */
 
 .footer-cta {
     position: relative;
-    margin-bottom: -40px;
-    padding: 9vmin 4vmin 10vmin;
-    color: #fff;
     text-align: center;
-    background: var(--color-darkgrey);
-}
-
-.footer-cta.cta-alt {
-    padding: 2vmin 4vmin 12vmin;
-    background: transparent;
 }
 
-/* Increases the default h2 size by 15%, for small and large screens */
-.footer-cta h2 {
-    margin: 0 0 30px;
-    font-size: 3.2rem;
-}
-
-.footer-cta.cta-alt h2 {
-    color: var(--color-darkgrey);
+.footer-cta-title {
+    margin: 0 0 min(24px, 6.4vmin);
+    font-size: clamp(2.6rem, 5vw, 3.8rem);
+    font-weight: 800;
 }
 
-@media (max-width: 600px) {
-    .footer-cta h2 {
-        font-size: 2.65rem;
-    }
+.has-serif-title .footer-cta-title {
+    font-family: var(--font-serif);
 }
 
 .footer-cta-button {
@@ -1439,23 +1413,27 @@ iframe.instagram-media + script + :not([id]) {
     width: 100%;
     max-width: 500px;
     padding: 5px 5px 5px 15px;
-    font-size: 1.8rem;
-    color: var(--color-midgrey);
+    font-size: 1.7rem;
+    color: var(--color-secondary-text);
     background: #fff;
+    border: 1px solid var(--color-border);
     border-radius: 8px;
+    transition: border-color 0.2s;
 }
 
-.footer-cta.cta-alt .footer-cta-button {
-    border: 1px solid var(--color-lightgrey);
+.footer-cta-button:hover {
+    border-color: color-mod(var(--color-border) l(-12%));
 }
 
 .footer-cta-button span {
     display: inline-block;
-    padding: 10px 15px;
+    padding: 9px 15px;
     color: #fff;
-    font-weight: 500;
+    font-size: 1.6rem;
+    font-weight: 600;
+    letter-spacing: -0.005em;
     background: var(--ghost-accent-color);
-    border-radius: 5px;
+    border-radius: 6px;
 }
 
 
@@ -1463,47 +1441,29 @@ iframe.instagram-media + script + :not([id]) {
 /* ---------------------------------------------------------- */
 
 .read-more-wrap {
-    width: 100%;
-    padding: 4vmin;
-    margin: 40px auto -40px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    background: color-mod(var(--color-darkgrey) l(-5%));
+    margin-top: max(12vmin, 72px);
 }
 
 .read-more {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(6, 1fr);
     grid-gap: 4vmin;
 }
 
-.read-more .post-card-title {
-    color: #fff;
-    opacity: 0.8;
-}
-
-.read-more .post-card-excerpt {
-    color: rgba(255, 255, 255, 0.6);
-}
-
-.read-more .post-card-byline-content a {
-    color: #fff;
-}
-
-
 @media (max-width: 1000px) {
     .read-more {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(4, 1fr);
     }
-    .read-more article:nth-child(3) {
+    .read-more .post-card:nth-child(3) {
         display: none;
     }
 }
 
 @media (max-width: 700px) {
     .read-more {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(2, 1fr);
     }
-    .read-more article:nth-child(2) {
+    .read-more .post-card:nth-child(2) {
         display: none;
     }
 }
@@ -1512,94 +1472,41 @@ iframe.instagram-media + script + :not([id]) {
 /* 8. Author Template
 /* ---------------------------------------------------------- */
 
-.author-template .posts {
-    position: relative;
-    height: 100%;
-    display: grid;
-    grid-template-columns: 200px 1fr 1fr;
-    grid-gap: 4vmin;
-}
-
-.author-template .posts .post-feed {
-    grid-column: 2 / 4;
-    grid-template-columns: 1fr 1fr;
-}
-
-.author-profile {
-    padding: 4vmin 0;
-}
-
-.author-profile-content {
-    height: auto;
-    position: sticky;
-    top: 4vmin;
-    font-size: 1.4rem;
-    line-height:  1.4em;
-}
-
 .author-profile-pic {
     display: block;
-    width: 150px;
-    height: 150px;
+    width: 80px;
+    height: 80px;
     object-fit: cover;
     margin: 0 0 2rem;
     background: color-mod(var(--color-lightgrey) l(+10%));
     border-radius: 50%;
 }
 
-.author-profile h1 {
-    margin: 0 0 0.3em;
-    font-size: 2rem;
-}
-
-.author-profile p {
-    margin: 0 0 1.5em;
-    color: color-mod(var(--color-midgrey) l(-8%));
+.author-profile-footer {
+    margin-top: 16px;
 }
 
 .author-profile-location {
-    margin: 0 0 1.5em;
     font-weight: 700;
 }
 
+.author-profile-meta {
+    display: flex;
+    gap: 10px;
+}
+
 .author-profile-social-link {
-    display: block;
-    padding: 0 0 5px;
     font-size: 1.3rem;
-    color: color-mod(var(--color-midgrey) l(-8%));
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 100%;
-    white-space: nowrap;
+    color: var(--color-secondary-text);
 }
 
 .author-profile-social-link:hover {
     color: var(--color-darkgrey);
 }
 
-@media (max-width: 900px) {
-    .author-template .posts .post-feed {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (max-width: 650px) {
-    .author-template .posts {
-        grid-template-columns: 1fr;
-        grid-gap: 0;
-    }
-    .author-template .posts .post-feed {
-        grid-column: 1 / auto;
-    }
-    .author-profile {
-        padding-right: 0;
-    }
-    .author-profile-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-    }
+.author-profile-social-link svg {
+    width: 16px;
+    height: 16px;
 }
 
 
@@ -1620,7 +1527,7 @@ iframe.instagram-media + script + :not([id]) {
 /* ---------------------------------------------------------- */
 
 .error-content {
-    padding: 14vw 4vw 6vw;
+    padding: 14vw 4vw 2vw;
 }
 
 .error-message {
@@ -1630,7 +1537,6 @@ iframe.instagram-media + script + :not([id]) {
 
 .error-code {
     margin: 0;
-    color: var(--ghost-accent-color);
     font-size: 12vw;
     line-height: 1em;
     letter-spacing: -5px;
@@ -1638,9 +1544,10 @@ iframe.instagram-media + script + :not([id]) {
 
 .error-description {
     margin: 0;
-    color: var(--color-midgrey);
+    color: var(--color-secondary-text);
     font-size: 3.2rem;
     line-height: 1.3em;
+    letter-spacing: -0.005em;
     font-weight: 400;
 }
 
@@ -1688,8 +1595,9 @@ iframe.instagram-media + script + :not([id]) {
 
 .site-footer {
     position: relative;
-    margin: 40px 0 0 0;
-    padding: 40px 4vmin 140px;
+    margin: max(12vmin, 64px) 0 0 0;
+    padding-top: 48px;
+    padding-bottom: 140px;
     color: #fff;
     background: color-mod(var(--color-darkgrey) l(-5%));
 }
@@ -1751,7 +1659,7 @@ iframe.instagram-media + script + :not([id]) {
     border-radius: 100%;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 767px) {
     .site-footer .inner {
         max-width: 500px;
         grid-template-columns: 1fr;
@@ -1763,23 +1671,15 @@ iframe.instagram-media + script + :not([id]) {
         color: #fff;
         font-size: 1.5rem;
     }
+    .site-footer .copyright {
+        margin-bottom: 16px;
+    }
 }
 
 
 /* 12. Dark Mode
 /* ---------------------------------------------------------- */
 
-/* If you prefer a dark color scheme, you can enable dark mode
-by adding the following code to the Head section of "Code Injection"
-settings inside: Ghost Admin > Settings > Advanced
-
-<script>document.documentElement.classList.add('dark-mode');</script>
-
-Or you can just edit default.hbs and add the .dark-mode class directly
-to the html tag on the very first line of the file.
-
- */
-
 html.dark-mode body {
     color: rgba(255, 255, 255, 0.75);
     background: var(--color-darkmode);
@@ -1793,16 +1693,20 @@ html.dark-mode kbd {
     background: color-mod(var(--color-darkmode) l(+5%));
 }
 
-html.dark-mode .post-card,
-html.dark-mode .post-card:hover {
-    border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
+html.dark-mode figcaption a {
+    color: #fff;
 }
 
-html.dark-mode .post-card-byline-content a {
-    color: rgba(255, 255, 255, 0.75);
+html.dark-mode .gh-head {
+    background: var(--color-darkmode);
+    color: #fff;
 }
 
-html.dark-mode .post-card-byline-content a:hover {
+html.dark-mode .gh-burger-box {
+    color: #fff;
+}
+
+html.dark-mode .site-header-content {
     color: #fff;
 }
 
@@ -1810,24 +1714,24 @@ html.dark-mode .post-card-image {
     background: var(--color-darkmode);
 }
 
-html.dark-mode .post-card-title {
-    color: rgba(255, 255, 255, 0.85);
+html.dark-mode :is(.post-card-primary-tag, .post-card-meta, .article-tag a, .byline-meta-content) {
+    color: color-mod(var(--color-secondary-text) l(-22%));
 }
 
-html.dark-mode .post-card-excerpt {
-    color: color-mod(var(--color-midgrey) l(+10%));
+html.dark-mode .post-card-title {
+    color: #fff;
 }
 
-html.dark-mode .post-full-content {
-    background: var(--color-darkmode);
+html.dark-mode .post-card-excerpt {
+    color: var(--color-secondary-text);
 }
 
 html.dark-mode .article-title {
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
 }
 
 html.dark-mode .article-excerpt {
-    color: color-mod(var(--color-midgrey) l(+10%));
+    color: var(--color-secondary-text);
 }
 
 html.dark-mode .post-full-image {
@@ -1838,11 +1742,7 @@ html.dark-mode .article-byline {
     border-top-color: color-mod(var(--color-darkmode) l(+15%));
 }
 
-html.dark-mode .article-byline-meta h4 a {
-    color: rgba(255, 255, 255, 0.75);
-}
-
-html.dark-mode .article-byline-meta h4 a:hover {
+html.dark-mode .article-byline-meta .author-name a {
     color: #fff;
 }
 
@@ -1934,160 +1834,8 @@ html.dark-mode .kg-header-card h3.kg-header-card-subheader {
     color: #fff;
 }
 
-@media (prefers-color-scheme: dark) {
-    html.auto-color body {
-        color: rgba(255, 255, 255, 0.75);
-        background: var(--color-darkmode);
-    }
-
-    html.auto-color img {
-        opacity: 0.9;
-    }
-
-    html.auto-color kbd {
-        background: color-mod(var(--color-darkmode) l(+5%));
-    }
-
-    html.auto-color .post-card,
-    html.auto-color .post-card:hover {
-        border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
-    }
-
-    html.auto-color .post-card-byline-content a {
-        color: rgba(255, 255, 255, 0.75);
-    }
-
-    html.auto-color .post-card-byline-content a:hover {
-        color: #fff;
-    }
-
-    html.auto-color .post-card-image {
-        background: var(--color-darkmode);
-    }
-
-    html.auto-color .post-card-title {
-        color: rgba(255, 255, 255, 0.85);
-    }
-
-    html.auto-color .post-card-excerpt {
-        color: color-mod(var(--color-midgrey) l(+10%));
-    }
-
-    html.auto-color .post-full-content {
-        background: var(--color-darkmode);
-    }
-
-    html.auto-color .article-title {
-        color: rgba(255, 255, 255, 0.9);
-    }
-
-    html.auto-color .article-excerpt {
-        color: color-mod(var(--color-midgrey) l(+10%));
-    }
-
-    html.auto-color .post-full-image {
-        background-color: color-mod(var(--color-darkmode) l(+8%));
-    }
-
-    html.auto-color .article-byline {
-        border-top-color: color-mod(var(--color-darkmode) l(+15%));
-    }
-
-    html.auto-color .article-byline-meta h4 a {
-        color: rgba(255, 255, 255, 0.75);
-    }
-
-    html.auto-color .article-byline-meta h4 a:hover {
-        color: #fff;
-    }
-
-    html.auto-color .no-image .author-social-link a {
-        color: rgba(255, 255, 255, 0.75);
-    }
-
-    html.auto-color .gh-content > [id] {
-        color: rgba(255, 255, 255, 0.9);
-    }
-
-    html.auto-color .gh-content pre {
-        background: color-mod(var(--color-darkgrey) l(-8%));
-    }
-
-    html.auto-color .gh-content :not(pre) > code {
-        background: color-mod(var(--color-darkgrey) l(+6%));
-        border-color: color-mod(var(--color-darkmode) l(+8%));
-        color: var(--color-wash);
-    }
-
-    html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
-        color: #fff;
-    }
-
-    html.auto-color .gh-content strong {
-        color: #fff;
-    }
-
-    html.auto-color .gh-content em {
-        color: #fff;
-    }
-
-    html.auto-color .gh-content code {
-        color: #fff;
-        background: #000;
-    }
-
-    html.auto-color hr {
-        border-top-color: color-mod(var(--color-darkmode) l(+8%));
-    }
-
-    html.auto-color .gh-content hr:after {
-        background: color-mod(var(--color-darkmode) l(+8%));
-        box-shadow: var(--color-darkmode) 0 0 0 5px;
-    }
-
-    html.auto-color figcaption {
-        color: rgba(255, 255, 255, 0.6);
-    }
-
-    html.auto-color .gh-content table td:first-child {
-        background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
-    }
-
-    html.auto-color .gh-content table td:last-child {
-        background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
-    }
-
-    html.auto-color .gh-content table th {
-        color: rgba(255, 255, 255, 0.85);
-        background-color: color-mod(var(--color-darkmode) l(+8%));
-    }
-
-    html.auto-color .gh-content table th,
-    html.auto-color .gh-content table td {
-        border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
-    }
-
-    html.auto-color .gh-content input {
-        color: color-mod(var(--color-midgrey) l(-30%));
-    }
-
-    html.auto-color .site-archive-header .no-image {
-        color: rgba(255, 255, 255, 0.9);
-        background: var(--color-darkmode);
-    }
-
-    html.auto-color .kg-header-card.kg-style-dark {
-        background: color-mod(var(--color-darkgrey) l(-5%));
-    }
-
-    html.auto-color .kg-header-card.kg-style-light {
-        background: color-mod(var(--color-darkgrey) l(+5%));
-    }
-
-    html.auto-color .kg-header-card h2.kg-header-card-header,
-    html.auto-color .kg-header-card h3.kg-header-card-subheader {
-        color: #fff;
-    }
+html.dark-mode .footer-cta-title {
+    color: #fff;
 }
 
 /*