Vivid-Casper/assets/css/screen.css

/* Table of Contents
/* ------------------------------------------------------------

This is a development CSS file which is built to a minified
production stylesheet in assets/built/screen.css

1.  Global Styles
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
  7.1. Post Byline
  7.2. Members Subscribe Form
  7.3. Comments
  7.4. Related Posts
  7.5. Koenig Styles
8.  Author Template
9.  Error Template
11. Site Footer
12. Dark Mode

*/

/* 1. Global - Set up the things
/* ---------------------------------------------------------- */

/* Import CSS reset and base styles */
@import "global.css";

:root {

    /* Colours */
    --color-green: #a4d037;
    --color-yellow: #fecd35;
    --color-red: #f05230;
    --color-darkgrey: #15171A;
    --color-midgrey: #738a94;
    --color-lightgrey: #c5d2d9;
    --color-wash: #e5eff5;
    --color-darkmode: #1a1c20;

    /*
    An accent color is also set by Ghost itself in
    Ghost Admin > Settings > Brand

    --ghost-accent-color: {value};

    You can use this variale throughout your styles

     */

    /* Fonts */
    --font-sans-serif: -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;

}


/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    z-index: 100;
    flex-grow: 1;
}

/* Full width page blocks */
.outer {
    position: relative;
    padding: 0 4vmin;
}

/* Centered content container blocks */
.inner {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

/* Usage:

<div class="outer">
    <div class="inner">
        Centered content
    </div>
</div>

*/


/* 4. Site Header
/* ---------------------------------------------------------- */

.site-header-background {
    position: relative;
    margin-top: 64px;
    padding-bottom: 12px;
    color: #fff;
    background: var(--ghost-accent-color) no-repeat center center;
    background-size: cover;
}

.site-header-background:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: block;
    background: rgba(0,0,0,0.18);
}

.site-header-background:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 10;
    display: block;
    height: 140px;
    background: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0));
}

.site-header-background.no-image:before,
.site-header-background.no-image:after {
    display: none;
}

.site-header-content {
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6vw 3vw;
    min-height: 200px;
    max-height: 340px;
}

.site-title {
    z-index: 10;
    margin: 0 0 0 -2px;
    padding: 0;
    font-size: 5.0rem;
    line-height: 1em;
    font-weight: 600;
}

.site-logo {
    max-height: 55px;
}

.site-description {
    z-index: 10;
    margin: 0;
    padding: 5px 0;
    font-size: 2.1rem;
    line-height: 1.4em;
    font-weight: 400;
    opacity: 0.8;
}

/* 4.1 Home header
/* ---------------------------------------------------------- */

.site-home-header {
    z-index: 1000;
}

.site-home-header .site-header-background {
    margin-top: 0;
}

.site-home-header .site-header-content {
    padding: 5vw 3vw 6vw;
}

.site-home-header .site-title {
    font-size: 5.5rem;
    text-align: center;
}

.site-home-header .site-description {
    font-size: 2.2rem;
    font-weight: 300;
    text-align: center;
}


/* 4.2 Archive header (tag and author post lists)
/* ---------------------------------------------------------- */

.site-archive-header .site-header-content {
    position: relative;
    align-items: stretch;
    padding: 12vw 0 20px;
    min-height: 200px;
    max-height: 600px;
}

.site-archive-header .no-image {
    padding-top: 0;
    padding-bottom: 0;
    color: var(--color-darkgrey);
    background: #fff;
    opacity: 1.0;
}

.site-archive-header .no-image .site-description {
    color: var(--color-midgrey);
    opacity: 1.0;
}


.site-archive-header .no-image .site-header-content {
    padding: 5vw 0 10px;
}


/* Special header styles for smaller screens */

@media (max-width: 900px) {
    .site-header-content {
        padding-bottom: 9vw;
    }
}

@media (max-width: 500px) {
    .site-home-header .site-title {
        font-size: 4.2rem;
    }

    .site-home-header .site-description {
        font-size: 1.8rem;
    }

    .site-archive-header .site-header-content {
        flex-direction: column;
        align-items: center;
        min-height: unset;
    }

    .site-archive-header .site-title {
        font-size: 4.2rem;
        text-align: center;
    }

    .site-archive-header .no-image .site-header-content {
        padding: 12vw 0 20px;
    }
}


/* 5. Site Navigation
/* ---------------------------------------------------------- */

.site-nav-main {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    background: var(--ghost-accent-color);
}

.site-nav {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;
    height: 68px;
    font-size: 1.5rem;
}

.site-nav-left-wrapper {
    position: relative;
    flex: 1 0 auto;
    display: flex;
}

.site-nav-left {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-right: 10px;
    padding: 10px 0 80px;
    font-weight: 500;
    white-space: nowrap;

    -ms-overflow-scrolling: touch;
}

.site-nav-left .nav li:last-of-type {
    padding-right: 20px;
}

/* Site Nav Hack Explanation (above):

What's happening above is .site-nav-left is set to overflow-x and
allow sideways scrolling, so that when there isn't enough space for
all nav items (either due to lots of nav items, or a small viewport),
you can still scroll side-to-side to reach them. Also, there is a
small gradient on the left and right side covering the menu so that
the menu goes offscreen smoothly.

The knock-on effect of this is ugly browser-scroll bars at the bottom,
so 80px of padding-bottom and a 40px fixed height parent (.site-nav)
hides that entirely. Slightly hacky code. But nice clean end-result.

*/

.site-nav-logo {
    position: relative;
    z-index: 100;
    flex-shrink: 0;
    display: inline-block;
    margin-right: 32px;
    padding: 12px 0;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1.8rem;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.site-nav-logo:hover {
    text-decoration: none;
}

.site-nav-logo img {
    display: block;
    width: auto;
    height: 21px;
}

.site-home-header .site-nav-logo {
    display: none;
}

.site-nav-content {
    position: relative;
    align-self: flex-start;
}

.nav {
    position: absolute;
    z-index: 1000;
    display: flex;
    margin: 0 0 0 -12px;
    padding: 0;
    list-style: none;
    transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav li {
    display: block;
    margin: 0;
    padding: 0;
}

.nav li a {
    position: relative;
    display: block;
    padding: 12px 12px;
    color: #fff;
    opacity: 0.7;
}

.nav li a:hover {
    text-decoration: none;
    opacity: 1;
}

.nav-post-title-active .nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-175%);
}

.nav-post-title {
    visibility: hidden;
    position: absolute;
    top: 9px;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 400;
    opacity: 0;
    transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateY(175%);
}

.nav-post-title.dash {
    left: -25px;
}

.nav-post-title.dash:before {
    content: "– ";
    opacity: 0.5;
}

.nav-post-title-active .nav-post-title {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.site-nav-right {
    flex: 0 1 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 0;
    height: 64px;
}

.site-nav-right .nav {
    position: relative;
    margin: 0;
}

.site-nav-right .nav a {
    white-space: nowrap;
}

.site-nav-right .nav a:before {
    display: none;
}

.site-nav-right .nav li:last-of-type a {
    margin-right: -12px;
}

.social-links {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.social-link {
    display: inline-block;
    margin: 0;
    padding: 10px;
    opacity: 0.8;
}

.social-link:hover {
    opacity: 1.0;
}

.social-link svg {
    height: 1.8rem;
    fill: #fff;
}

.social-link-fb svg {
    height: 1.6rem;
}

.social-link-wb svg {
    height: 1.6rem;
}

.social-link-wb svg path {
    stroke: #fff;
}

.social-link-rss svg {
    height: 1.9rem;
}

.subscribe-button {
    display: block;
    margin: 0 0 0 10px;
    padding: 5px 10px;
    border: #fff 1px solid;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1em;
    border-radius: 5px;
    opacity: 0.8;
}

.subscribe-button:hover {
    text-decoration: none;
    opacity: 1;
}

.site-nav-right .nav + .subscribe-button {
    margin-left: 24px;
}

.rss-button {
    padding: 10px 8px;
    opacity: 0.8;
}

.rss-button:hover {
    opacity: 1;
}

.rss-button svg {
    margin-bottom: 1px;
    height: 2.1rem;
    fill: #fff;
}

/* Special behaviors for home navigation */

.home-template .site-nav-main {
    z-index: 100;
}

.home-template .site-nav-main .site-nav {
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.home-template .site-nav-main .fixed-nav-active {
    opacity: 1;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
}

@media (max-width: 700px) {
    .site-home-header .site-nav {
        margin-left: -5vw;
    }

    .site-nav-main {
        padding-right: 0;
        padding-left: 0;
    }

    .site-nav-left {
        margin-right: 0;
        padding-left: 5vw;
    }

    .site-nav-right {
        display: none;
    }
}


/* 6. Post Feed
/* ---------------------------------------------------------- */

.posts {
    overflow-x: hidden;
}

.post-feed {
    position: relative;
    display: grid;
    grid-gap: 4vmin;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4vmin 0;
}

@media (max-width: 1000px) {
    .post-feed {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 700px) {
    .post-feed {
        grid-template-columns: 1fr;
        grid-gap: 40px;
    }
}

.post-card {
    position: relative;
    flex: 1 1 301px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 220px;
    background-size: cover;
}

.post-card-image-link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 3px;
}

.post-card-image {
    width: 100%;
    height: 200px;
    background: var(--color-lightgrey) no-repeat center center;

    object-fit: cover;
}

.post-card-content-link {
    position: relative;
    display: block;
    color: var(--color-darkgrey);
}

.post-card-content-link:hover {
    text-decoration: none;
}

.post-card-header {
    margin: 20px 0 0;
}

.post-feed .no-image .post-card-content-link {
    padding: 0;
}

.no-image .post-card-header {
    margin-top: 0;
}

.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;
}

.post-card-title {
    margin: 0 0 0.4em;
    font-size: 2.4rem;
    transition: color 0.2s ease-in-out;
}

.no-image .post-card-title {
    margin-top: 0;
}

.post-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.post-card-excerpt {
    max-width: 56em;
    color: color-mod(var(--color-midgrey) l(-8%));
}

.post-card:not(.post-card-large) .post-card-excerpt p {
    margin-bottom: 1em;
    display: -webkit-box;
    overflow-y: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.post-card-meta {
    display: flex;
    align-items: center;
    padding: 0;
}

.author-profile-image,
.avatar-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    background: color-mod(var(--color-lightgrey) l(+10%));
    border-radius: 100%;

    object-fit: cover;
}

.post-card-meta .profile-image-wrapper,
.post-card-meta .avatar-wrapper {
    position: relative;
}

.author-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 4px;
    padding: 0;
    list-style: none;
}

.author-list-item {
    position: relative;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.static-avatar {
    display: block;
    overflow: hidden;
    margin: 0 0 0 -6px;
    width: 36px;
    height: 36px;
    border: #fff 2px solid;
    border-radius: 100%;
}

.post-card-byline-content {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    margin: 0 0 0 6px;
    color: color-mod(var(--color-midgrey) l(+10%));
    font-size: 1.3rem;
    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(+20%));
    font-weight: 600;
}

.post-card-byline-date {
    font-size: 1.2rem;
}

.post-card-byline-date .bull {
    display: inline-block;
    margin: 0 4px;
    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):

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: 1001px) {
    .post-card-large {
        grid-column: 1 / span 3;
        display: grid;
        grid-gap: 4vmin;
        grid-template-columns: 1fr 1fr 1fr;
        min-height: 280px;
        border-top: 0;
    }

    .post-card-large:not(.no-image) .post-card-header {
        margin-top: 0;
    }

    .post-card-large .post-card-image-link {
        position: relative;
        grid-column: 1 / span 2;
        margin-bottom: 0;
        min-height: 380px;
    }

    .post-card-large .post-card-image {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .post-card-large .post-card-content {
        justify-content: center;
    }

    .post-card-large .post-card-title {
        margin-top: 0;
        font-size: 3.2rem;
    }

    .post-card-large .post-card-excerpt p {
        margin-bottom: 1.5em;
        font-size: 1.7rem;
        line-height: 1.55em;
    }
}


@media (max-width: 500px) {
    .post-card-title {
        font-size: 1.9rem;
    }

    .post-card-excerpt {
        font-size: 1.6rem;
    }
}


/* 7. Single Post
/* ---------------------------------------------------------- */

.article {
    padding: calc(68px + 8vmin) 0 8vmin;
    /* Add 68px to account for sticky navbar */
}

.article-header {
    padding: 0 0 6vmin 0;
}

.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;
}

.article-tag a {
    color: var(--ghost-accent-color);
}

.article-title {
    margin: 0;
    color: color-mod(var(--color-darkgrey) l(-5%));
}

.article-excerpt {
    margin: 20px 0 10px;
    font-size: 2rem;
    line-height: 1.4em;
    opacity: 0.6;
}

.gh-canvas .article-image {
    grid-column: wide-start / wide-end;
    width: 100%;
    margin: 6vmin 0 0;
}

@media (max-width: 500px) {
    .article-excerpt {
        font-size: 1.9rem;
        line-height: 1.5em;
    }
}

/* -------- */

/* Content grid
/* ---------------------------------------------------------- */

/* Canvas creates a multi-column, centered grid which the post
is laid out on top of. Canvas just defines the grid, we don't
use it for applying any other styles. */

.gh-canvas {
    display: grid;
    grid-template-columns:
        [full-start]
        minmax(4vmin, auto)
            [wide-start]
            minmax(auto, 240px)
                [main-start]
                    min(720px, calc(100% - 8vw))
                [main-end]
            minmax(auto, 240px)
            [wide-end]
        minmax(4vmin, auto)
        [full-end]
    ;
}

.gh-canvas > * {
    grid-column: main-start / main-end;
}

.kg-width-wide {
    grid-column: wide-start / wide-end;
}

.kg-width-full {
    grid-column: full-start / full-end;
}

.kg-width-full img {
    width: 100%;
}


/* Content
/* ---------------------------------------------------------- */

/* Content refers to styling all page and post content that is
created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */

/* Default vertical spacing */
.gh-content > * + * {
    margin-top: 4vmin;
    margin-bottom: 0;
}

/* [id] represents all headings h1-h6, reset all margins */
.gh-content [id] {
    margin: 0;
}

/* Add back a top margin to all headings, unless a heading
is the very first element in the post content */
.gh-content [id]:not(:first-child) {
    margin: 2em 0 0;
}

/* Add a small margin between a heading and anything after it */
.gh-content > [id] + * {
    margin-top: 1.5rem !important;
}

/* A larger margin before/after HRs and blockquotes */
.gh-content hr,
.gh-content blockquote {
    margin-top: 6vmin;
}
.gh-content hr + *,
.gh-content blockquote + * {
    margin-top: 6vmin !important;
}

/* Now the content typography styles */
.gh-content a {
    color: var(--ghost-accent-color);
    text-decoration: underline;
}

.gh-content > blockquote,
.gh-content > ol,
.gh-content > ul,
.gh-content > dl,
.gh-content > p {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1.6em;
}

.gh-content > ul,
.gh-content > ol,
.gh-content > dl {
    padding-left: 1.9em;
}

.gh-content blockquote {
    position: relative;
    font-style: italic;
}

.gh-content blockquote::before {
    content: "";
    position: absolute;
    left: -1.5em;
    top: 0;
    bottom: 0;
    width: 0.3rem;
    background: var(--color-primary);
}

.gh-content :not(pre) code {
    vertical-align: middle;
    padding: 0.15em 0.4em 0.15em;
    border: #e1eaef 1px solid;
    font-weight: 400 !important;
    font-size: 0.9em;
    line-height: 1em;
    color: #15171A;
    background: #f0f6f9;
    border-radius: 0.25em;
}

.gh-content > pre {
    overflow: scroll;
    padding: 16px 20px;
    background: rgba(255,255,255,0.8);
    border-radius: 5px;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
}

@media (max-width: 650px) {
    .gh-content blockquote,
    .gh-content ol,
    .gh-content ul,
    .gh-content dl,
    .gh-content p {
        font-size: 1.8rem;
    }

    .gh-content blockquote::before {
        left: -4vmin;
    }
}


/* Cards
/* ---------------------------------------------------------- */

/* Cards are dynamic blocks of content which appear within Ghost
posts, for example: embedded videos, tweets, galleries, or
specially styled bookmark links. We add extra styling here to
make sure they look good, and are given a bit of extra spacing. */

/* Add extra margin before/after any cards,
except for when immediately preceeded by a heading */
.gh-content :not(.kg-card):not([id]) + .kg-card {
    margin-top: 6vmin;
    margin-bottom: 0;
}
.gh-content .kg-card + :not(.kg-card) {
    margin-top: 6vmin;
    margin-bottom: 0;
}

/* This keeps small embeds centered */
.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* This keeps small iamges centered */
.kg-image-card img {
    margin: auto;
}


/* Captions */
.kg-card 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;
}
.kg-card figcaption strong {
    color: rgba(0,0,0,0.8);
}


/* Galleries
/* ---------------------------------------------------------- */

/* When there are two galleries in a two, reduce margin
between them, so it looks like 1 big gallery */
.kg-gallery-card + .kg-gallery-card {
    margin-top: 0.75em;
}

.kg-gallery-container {
    position: relative;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
    margin: 0.75em 0 0 0;
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.75em;
}


/* Bookmark Cards
/* ---------------------------------------------------------- */

/* These are styled links with structured data, similar to a
Twitter card. These styles roughly match what you see in the
Ghost editor. */

.kg-bookmark-card,
.kg-bookmark-publisher {
    position: relative;
    width: 100%;
}

.kg-bookmark-container,
.kg-bookmark-container:hover {
    display: flex;
    color: currentColor;
    font-family: var(--font-sans-serif);
    text-decoration: none !important;
    background: rgba(255,255,255,0.6);
    border-radius: 5px;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.kg-bookmark-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
}

.kg-bookmark-title {
    font-size: 1.5rem;
    line-height: 1.4em;
    font-weight: 600;
    color: #15171A;
}

.kg-bookmark-description {
    display: -webkit-box;
    font-size: 1.4rem;
    line-height: 1.5em;
    margin-top: 3px;
    color: #626d79;
    font-weight: 400;
    max-height: 44px;
    overflow-y: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    margin-top: 22px;
    width: 100%;
    color: #394047;
    font-size: 1.4rem;
    font-weight: 500;
}

.kg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

.kg-bookmark-author,
.kg-bookmark-publisher {
    display: inline;
}

.kg-bookmark-publisher {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 240px;
    white-space: nowrap;
    display: block;
    line-height: 1.65em;
}

.kg-bookmark-metadata > span:nth-of-type(2) {
    color: #626d79;
    font-weight: 400;
}

.kg-bookmark-metadata > span:nth-of-type(2):before {
    content: "•";
    color: #394047;
    margin: 0 6px;
}

.kg-bookmark-thumbnail {
    position: relative;
    flex-grow: 1;
    min-width: 33%;
}

.kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 4px 4px 0;
}


/* Card captions
/* ---------------------------------------------------------- */

.kg-width-full.kg-card-hascaption {
    display: grid;
    grid-template-columns: inherit;
}

.kg-width-wide.kg-card-hascaption img {
    grid-column: wide-start / wide-end;
}
.kg-width-full.kg-card-hascaption img {
    grid-column: 1 / -1;
}

.kg-width-full.kg-card-hascaption figcaption {
    grid-column: main-start / main-end;
}



/* -----old------ */

.footnotes-sep {
    margin-bottom: 30px;
}

.footnotes {
    font-size: 1.5rem;
}

.footnotes p {
    margin: 0;
}

.footnote-backref {
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Tables */
.post-full-content table {
    display: inline-block;
    overflow-x: auto;
    margin: 0.5em 0 2.5em;
    max-width: 100%;
    width: auto;
    border-spacing: 0;
    border-collapse: collapse;
    font-family: var(--font-sans-serif);
    font-size: 1.6rem;
    white-space: nowrap;
    vertical-align: top;
}

.post-full-content table {
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
    background-attachment: scroll, scroll;
    background-size: 10px 100%, 10px 100%;
    background-repeat: no-repeat;
}

.post-full-content table td:first-child {
    background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
    background-size: 20px 100%;
    background-repeat: no-repeat;
}

.post-full-content table td:last-child {
    background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
    background-position: 100% 0;
    background-size: 20px 100%;
    background-repeat: no-repeat;
}

.post-full-content table th {
    color: var(--color-darkgrey);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: left;
    text-transform: uppercase;
    background-color: color-mod(var(--color-wash) l(+4%));
}

.post-full-content table th,
.post-full-content table td {
    padding: 6px 12px;
    border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
}


/* 7.1. Post Byline
/* ---------------------------------------------------------- */

.article-byline {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 0;
}

.article-byline-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.article-byline-content .author-list {
    justify-content: flex-start;
    padding: 0 12px 0 0;
}

.article-byline-meta {
    color: color-mod(var(--color-midgrey));
    font-size: 1.3rem;
    line-height: 1.2em;
}

.article-byline-meta h4 {
    margin: 0 0 3px;
    font-size: 1.5rem;
}

.article-byline-meta h4 a {
    color: color-mod(var(--color-darkgrey));
}

.article-byline-meta h4 a:hover {
    color: var(--color-darkgrey);
}

.article-byline-meta .bull {
    display: inline-block;
    margin: 0 2px;
    opacity: 0.6;
}

.author-avatar {
    display: block;
    overflow: hidden;
    margin: 0 -4px;
    width: 40px;
    height: 40px;
    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;
}

@media (max-width: 500px) {
    .author-avatar {
        width: 36px;
        height: 36px;
    }

    .article-byline {
        margin-top: 20px;
    }

    .article-byline-meta {
        font-size: 1.2rem;
    }

    .article-byline-meta h4 {
        margin-bottom: 2px;
        font-size: 1.2rem;
    }
}


/* 7.3. Comments
/* ---------------------------------------------------------- */

.post-full-comments {
    margin: 0 auto;
    max-width: 840px;
}


/* 7.4. Read more
/* ---------------------------------------------------------- */

.read-more-wrap {
    width: 100%;
    padding: 4vmin;
    margin: 0 auto -40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: color-mod(var(--color-darkgrey) l(-5%));
}

.read-more {
    display: grid;
    grid-template-columns: 1fr 1fr 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);
}


@media (max-width: 1000px) {
    .read-more {
        grid-template-columns: 1fr 1fr;
    }
    .read-more article:nth-child(3) {
        display: none;
    }
}

@media (max-width: 700px) {
    .read-more {
        grid-template-columns: 1fr;
    }
    .read-more article:nth-child(2) {
        display: none;
    }
}


/* 8. Author Template
/* ---------------------------------------------------------- */
.author-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10vw 0 10px;
}

.site-archive-header .author-header {
    align-items: center;
}

.site-archive-header .no-image .author-header {
    padding-bottom: 20px;
}

.author-header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 5px 0 0 30px;
}

.site-header-content .author-profile-image {
    z-index: 10;
    flex-shrink: 0;
    margin: -4px 0 0;
    width: 110px;
    height: 110px;
    box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
}

.author-header-content .author-bio {
    z-index: 10;
    flex-shrink: 0;
    margin: 6px 0 0;
    max-width: 46em;
    font-size: 2.0rem;
    line-height: 1.3em;
    font-weight: 400;
    opacity: 0.8;
}

.author-header-content .author-meta {
    z-index: 10;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin: 0 0 0 1px;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.author-header-content .social-link:first-of-type {
    padding-left: 4px;
}

.no-image .author-header-content .author-bio {
    color: var(--color-midgrey);
    opacity: 1.0;
}

.no-image .author-header-content .author-meta {
    color: var(--color-midgrey);
    opacity: 1.0;
}

.author-social-link a {
    color: #fff;
    font-weight: 600;
}

.no-image .author-social-link a {
    color: var(--color-darkgrey);
}

.author-social-link a:hover {
    opacity: 1;
}

.author-social-link {
    display: inline-block;
    margin: 0;
    padding: 6px 0;
}

.author-location + .author-stats:before,
.author-stats + .author-social-link:before,
.author-social-link + .author-social-link:before {
    content: "\2022";
    display: inline-block;
    margin: 0 12px;
    color: #fff;
    opacity: 0.6;
}

.no-image .author-location + .author-stats:before,
.no-image .author-stats + .author-social-link:before,
.no-image .author-social-link + .author-social-link:before {
    color: var(--color-midgrey);
}

@media (max-width: 700px) {
    .author-location,
    .author-stats,
    .author-stats + .author-social-link:first-of-type:before {
        display: none;
    }
}

@media (max-width: 500px) {
    .author-header {
        padding: 10px 0 0;
    }

    .no-image .author-header {
        padding-bottom: 10px;
    }

    .author-header-content {
        align-items: center;
        margin: 16px 0 0 0;
    }

    .site-header-content .author-profile-image {
        width: 96px;
        height: 96px;
    }

    .author-header-content .author-bio {
        font-size: 1.8rem;
        line-height: 1.3em;
        letter-spacing: 0;
        text-align: center;
    }

    .author-header-content .author-meta {
        margin-top: 8px;
    }

    .author-location + .author-stats:before,
    .author-stats + .author-social-link:before,
    .author-social-link + .author-social-link:before {
        display: inline;
        margin: 0 6px;
    }
}


/* 9. Error Template
/* ---------------------------------------------------------- */

.error-content {
    padding: 14vw 4vw 6vw;
}

.site-nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    text-align: center;
}

.site-nav-center .site-nav-logo {
    margin-right: 0;
}

.error-message {
    padding-bottom: 10vw;
    border-bottom: 1px solid color-mod(var(--color-lightgrey) l(+10%));
    text-align: center;
}

.error-code {
    margin: 0;
    color: var(--color-lightgrey);
    font-size: 12vw;
    line-height: 1em;
    letter-spacing: -5px;
    opacity: 0.75;
}

.error-description {
    margin: 0;
    color: var(--color-midgrey);
    font-size: 3rem;
    line-height: 1.3em;
    font-weight: 400;
}

.error-link {
    display: inline-block;
    margin-top: 5px;
}

@media (min-width: 940px) {
    .error-content .post-card {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
}

@media (max-width: 800px) {
    .error-content {
        padding-top: 24vw;
    }
    .error-code {
        font-size: 11.2rem;
    }
    .error-message {
        padding-bottom: 16vw;
    }
    .error-description {
        margin: 5px 0 0 0;
        font-size: 1.8rem;
    }
}

@media (max-width: 500px) {
    .error-content {
        padding-top: 28vw;
    }
    .error-message {
        padding-bottom: 14vw;
    }
}


/* 11. Site Footer
/* ---------------------------------------------------------- */

.site-footer {
    position: relative;
    margin: 40px 0 0 0;
    padding-top: 40px;
    padding-bottom: 120px;
    color: #fff;
    background: color-mod(var(--color-darkgrey) l(-5%));
}

.site-footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,0.7);
    font-size: 1.3rem;
}

.site-footer-content a {
    color: rgba(255,255,255,0.7);
}

.site-footer-content a:hover {
    color: rgba(255,255,255,1);
    text-decoration: none;
}

.site-footer-nav {
    display: flex;
}

.site-footer-nav a {
    position: relative;
    margin-left: 20px;
}

.site-footer-nav a:before {
    content: "";
    position: absolute;
    top: 11px;
    left: -11px;
    display: block;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 100%;
}

.site-footer-nav a:first-of-type:before {
    display: none;
}

@media (max-width: 650px) {
    .site-footer-content {
        flex-direction: column;
    }

    .site-footer-nav a:first-child {
        margin-left: 0;
    }
}


/* 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);
}

html.dark-mode img {
    opacity: 0.9;
}

html.dark-mode .site-header-background:before {
    background: rgba(0,0,0,0.6);
}

html.dark-mode .post-card,
html.dark-mode .post-card:hover {
    border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
}

html.dark-mode .author-profile-image {
    background: var(--color-darkmode);
}

html.dark-mode .post-card-byline-content a {
    color: rgba(255, 255, 255, 0.75);
}

html.dark-mode .post-card-byline-content a:hover {
    color: #fff;
}

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 .post-card-excerpt {
    color: color-mod(var(--color-midgrey) l(+10%));
}

html.dark-mode .author-avatar,
html.dark-mode .static-avatar {
    border-color: color-mod(var(--color-darkgrey) l(+2%));
}

html.dark-mode .post-full-content {
    background: var(--color-darkmode);
}

html.dark-mode .article-title {
    color: rgba(255, 255, 255, 0.9);
}

html.dark-mode .article-excerpt {
    color: color-mod(var(--color-midgrey) l(+10%));
}

html.dark-mode .post-full-image {
    background-color: color-mod(var(--color-darkmode) l(+8%));
}

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 {
    color: #fff;
}

html.dark-mode .no-image .author-social-link a {
    color: rgba(255, 255, 255, 0.75);
}

html.dark-mode .post-full-content h1,
html.dark-mode .post-full-content h2,
html.dark-mode .post-full-content h3,
html.dark-mode .post-full-content h4,
html.dark-mode .post-full-content h6 {
    color: rgba(255, 255, 255, 0.9);
}

html.dark-mode .post-full-content a {
    color: #fff;
    box-shadow: inset 0 -1px 0 #fff;
}

html.dark-mode .post-full-content strong {
    color: #fff;
}

html.dark-mode .post-full-content em {
    color: #fff;
}

html.dark-mode .post-full-content code {
    color: #fff;
    background: #000;
}

html.dark-mode hr {
    border-top-color: color-mod(var(--color-darkmode) l(+8%));
}

html.dark-mode .post-full-content hr:after {
    background: color-mod(var(--color-darkmode) l(+8%));
    box-shadow: var(--color-darkmode) 0 0 0 5px;
}

html.dark-mode .post-full-content figcaption {
    color: rgba(255, 255, 255, 0.6);
}

html.dark-mode .post-full-content table td:first-child {
    background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
}

html.dark-mode .post-full-content table td:last-child {
    background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
}

html.dark-mode .post-full-content table th {
    color: rgba(255, 255, 255, 0.85);
    background-color: color-mod(var(--color-darkmode) l(+8%));
}

html.dark-mode .post-full-content table th,
html.dark-mode .post-full-content table td {
    border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
}

html.dark-mode .post-full-content .kg-bookmark-container,
html.dark-mode .post-full-content .kg-bookmark-container:hover {
    color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

html.dark-mode .post-full-content input {
    color: color-mod(var(--color-midgrey) l(-30%));
}

html.dark-mode .kg-bookmark-title {
    color: #fff;
}

html.dark-mode .kg-bookmark-description {
    color: rgba(255, 255, 255, 0.75);
}

html.dark-mode .kg-bookmark-metadata {
    color: rgba(255, 255, 255, 0.75);
}

html.dark-mode .site-archive-header .no-image {
    color: rgba(255, 255, 255, 0.9);
    background: var(--color-darkmode);
}

html.dark-mode .site-header-content .author-profile-image {
    box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
}

html.dark-mode .subscribe-form {
    border: none;
    background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
}

html.dark-mode .subscribe-form-title {
    color: rgba(255, 255, 255, 0.9);
}

html.dark-mode .subscribe-form p {
    color: rgba(255, 255, 255, 0.7);
}

html.dark-mode .subscribe-email {
    border-color: color-mod(var(--color-darkmode) l(+6%));
    color: rgba(255, 255, 255, 0.9);
    background: color-mod(var(--color-darkmode) l(+3%));
}

html.dark-mode .subscribe-email:focus {
    border-color: color-mod(var(--color-darkmode) l(+25%));
}

html.dark-mode .subscribe-form button {
    opacity: 0.9;
}

html.dark-mode .subscribe-form .invalid .message-error,
html.dark-mode .subscribe-form .error .message-error {
    color: color-mod(var(--color-red) l(+5%) s(-5%));
}

html.dark-mode .subscribe-form .success .message-success {
    color: color-mod(var(--color-green) l(+5%) s(-5%));
}