/*

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

*/

/* Lib - Local component imports
/* ---------------------------------------------------------- */
/* @import "/assets/css/screen.css"; */
@import "fonts.css";
@import "vars.css";

/* Main - Theme styles
/* ---------------------------------------------------------- */
body, .gh-content {
  font-size: 1.2em;
}

.img {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    border-radius: 100%;
}

.hidden {
    position: absolute;
    text-indent: -9999px;
    visibility: hidden;
}

/* Layout
/* ---------------------------------------------------------- */

.center {text-align: center;}

.gh-foot{
  white-space: normal;}

.gh-canvas {
    margin-right: calc(var(--gap) * -1);
    margin-left: calc(var(--gap) * -1);
}

.site-wrapper {
    min-height: 100vh;
    padding: 0 3vw;
}

@media (max-width: 850px) {
    .site-wrapper {
        padding: 6vw;
    }
}

.page-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 60%;
    padding: 5vw 0;
    margin: auto;
    text-align: center;
}

.page-head-title {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-base);
    word-break: break-word;
}

.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .page-head-title {
    font-family: var(--gh-font-heading, var(--font-serif));
}

@media (max-width: 500px) {
    .page-head {
        max-width: none;
        padding: 20vw 0;
    }

    .page-head-title {
        font-size: 2.4rem;
    }
}

.page-head-description {
    margin: 16px 0;
    font-size: 2.2rem;
    line-height: 1.35em;
    color: var(--color-base);
    opacity: 0.5;
}

@media (max-width: 500px) {
    .page-head-description {
        font-size: 1.6rem;
    }
}

TIME.gh-article-date {
  text-align: center;
  opacity: 0.4;
  margin-top: -12px;
}
.gh-post-subscribe {
  text-align: center;
  padding-top: 88px;
  padding-left: 10vw;
  padding-right: 10vw;
}
.gh-logo-footer {
  text-align: center;
  padding-top: 48px;
}
.post-content-body .gh-logo-footer {
  padding-top: 0px;
  margin-top: -20px;
}
.gh-logo-footer IMG {
  width: 108px;
  display:inline-block;
}
H1.quiet {
  font-size: 1.3em;
  opacity: 0.5;
  margin-top: 24px;
  margin-bottom: -12px;
}
HR.quiet {
  width: 40vw;
  margin-top: 48px;
  margin-bottom: 48px;
}
IMG.img-circle {
  border-radius: 50%;
  width: 30vh;
  display:inline-block;
}
.gh-subscribe-description {
  padding: 8px 0 8px 0;
}
HR.footsie {
  padding-top: 12px;
  margin-bottom: 20px;
}
.gh-post-subscribe IMG {
  margin: 0 auto;
}
.gh-logo-footer IMG {
  opacity: 0.3;
}
H3.fedi {
  font-size: 1.5em;
  color: #f90;
}

/* Site Navigation
/* ---------------------------------------------------------- */

.gh-head-logo {
    font-size: 2.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gh-head-menu,
.gh-head-actions {
    font-size: 1.4rem;
    font-weight: 600;
}

@media (max-width: 850px) {
    body:not(.is-head-open) .gh-head {
        margin: -6vw;
    }
}


/* Post Feed
/* ---------------------------------------------------------- */

.post-feed {
    display: flex;
    flex-wrap: wrap;
}

.post-card {
    position: relative;
    display: flex;
    flex: 1 1 50%;
    height: 35vw;
    overflow: hidden;
    counter-increment: posts;
    background: linear-gradient(135deg, #1f1f1f 0%, #111 100%) center center;
    background-size: cover;
}

@media (max-width: 700px) {
    .post-card {
        flex: 1 1 100%;
        height: 70vw;
    }
}

.post-card-large {
    flex: 1 1 100%;
}

.post-card-link {
    position: relative;
    display: block;
    flex: 1 1 auto;
}

.post-card-link:hover {
    opacity: 1;
}

.post-card-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.33, 0, 0.2, 1);
}

.post-card:not(.no-image) .post-card-content {
    opacity: 0;
}

@media (max-width: 700px) {
    .post-card:not(.no-image) .post-card-content {
        opacity: 1;
    }
}

.post-card-link:hover .post-card-content {
    opacity: 1;
}

.post-card-title {
    display: inline-block;
    margin: 0;
    font-size: 3.4rem;
    font-weight: 800;
    color: var(--color-white);
    text-align: center;
    word-break: keep-all;
    max-width: 100%;
}

.stuff {
  max-width: 90%;
}
.stuff TIME {
  opacity: 0.4;
}

.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .post-card-title {
    font-family: var(--gh-font-heading, var(--font-serif));
}

/* Posts without images */
.post-card.no-image::before {
    position: absolute;
    right: 5vw;
    bottom: -0.15em;
    display: block;
    font-size: 28vw;
    font-weight: var(--font-heavy);
    line-height: 1em;
    color: rgba(255, 255, 255, 0.1);
    letter-spacing: -0.05em;
    content: counter(posts);
}

.post-card.no-image .post-card-content {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4vw;
}

.post-card.no-image .post-card-title {
    line-height: 1.15em;
    text-align: left;
}

.post-card.no-image:hover .post-card-title {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .post-card.no-image::before {
        font-size: 50vw;
    }
}

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

.post-content {
    padding-top: max(6vw, 64px);
    margin: 0 auto;
}

.page-template .post-content {
    padding-top: 0;
}

.page-template .post-content-header {
    margin-top: var(--header-spacing);
}

.post-content-title {
    margin: 0 0 16px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-base);
    text-align: center;
    word-break: break-all;
}

.has-serif-title:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .post-content-title {
    font-family: var(--gh-font-heading, var(--font-serif));
}

.post-content-excerpt {
    font-size: 2rem;
    line-height: 1.6em;
    color: var(--color-base);
    text-align: center;
    word-break: break-word;
    opacity: 0.5;
}
.post-content-body .post-content-excerpt {
    text-align: left;
    font-size: 1.3em;
    line-height: 1.4em;
}

.has-serif-body:not([class*=" gh-font-body"]):not([class^="gh-font-body"]) .post-content-excerpt {
    font-family: var(--gh-font-body, var(--font-serif));
}

@media (max-width: 500px) {
    .post-content-excerpt {
        font-size: 1.8rem;
    }
}

.post-content-image {
    margin: 40px 0 2vw;
}

.post-content-image .kg-image {
    width: 100%;
}

@media (max-width: 960px) {
    .post-content-image .kg-image {
        width: 88vw;
    }
}

.post-content-comments {
    margin-top: 64px;
}

/* Author Archive
/* ---------------------------------------------------------- */

.author-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.author-links {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.author-links a {
    display: block;
    padding: 0 12px;
    margin: 0;
    color: var(--color-base);
    opacity: 0.4;
}

.author-links a:hover {
    text-decoration: none;
    opacity: 1;
}

.author-links .divider {
    display: inline-block;
    margin: 0 3px;
}

.left {
text-align: left;
}