@charset "utf-8";
/* CSS Document */

/* Grid width is *** */

:root {
    --grid-width: 1200px; /* Base Width is Set Here */
    --grid-gutter: clamp(26px, 2.5vw, 35px); /* Gutter Width is set here.  Just put half the gutter width here. */
    --grid-gap: calc(var(--grid-gutter) / 2);
    --header-height: clamp(113px, 11.071vw, 155px);
    --nav-height: clamp(25px, 2.429vw, 34px);
    --footer-height: 30px;
    --legal-height: 80px;
    --logo-width: clamp(394px, 38.429vw, 538px);
    --logo-height: clamp(99px, 9.714vw, 136px);

    --primary-color: #000000;
    --secondary-color: #333333;
    --tertiary-color: #ffffff;
    --primary-font: "Archivo", sans-serif;
    --secondary-font: "Archivo", sans-serif;
    --toggle-color: #FFF;
    --standard-font-size: clamp(14px, 1.286vw, 18px);
    --line-height: 1.5;
    --red: #a5071b;
    --black: #0c0c0c;
}

/* Base Template Settings */

.cta {
    background: var(--primary-color);
    height: calc(var(--standard-font-size) * 2);
    & *:not(svg) {
        color: var(--tertiary-color);
        padding-left: var(--standard-font-size);
        padding-right: var(--standard-font-size);
    }
}

:is(article, .text-container) {
    font-family: var(--primary-font);
    & * {
        margin-bottom: var(--standard-font-size);
        line-height: var(--line-height);
    }
    & :is(ul, ol) li,
    & p {
        font-family: var(--primary-font);
        font-size: var(--standard-font-size);
    }
    & :is(h1, .h1) {
        font-family: var(--secondary-font);
    }
    & :is(h2, .h2) {
        font-family: var(--secondary-font);
    }
    & :is(h3, .h3) {
        font-family: var(--secondary-font);
    }
    & :is(h4, .h4) {
        font-family: var(--secondary-font);
    }
    & :is(h5, .h5) {
        font-family: var(--secondary-font);
    }
    & blockquote {
        font-family: var(--secondary-font);
        & cite {
            font-family: var(--primary-font);
        }
    }
    & :not(.cta) > a {
        /* Standard Link Stylings */
    }
}

/* Header Settings */
.chromeperfectpixel-overlay-container {
    pointer-events: none;
}

body {
    background: var(--black);
    color: #fff;
    font-family: var(--primary-font);
}

main {
    
    .cast-container {
        figure {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            border: 15px solid var(--red);
            img {
                margin-bottom: 0;
            }
        }
        hr {
            width: 100%;
            border: none;
            border-top: 1px solid var(--red);
        }
        .box-container:last-child {
            hr {
                display: none;
            }
        }
    }
}

#page-head {
    height: calc(var(--header-height) + var(--nav-height));
    position: relative !important;
    top: 0;
    .header-bg {
        height: var(--header-height);
        .logo {
            margin-bottom: clamp(7px, 0.714vw, 10px);
            svg {
                defs + g {
                    path {
                        fill: #FFF!important;
                    }
                }
            }
        }
        &:before {
            content: "";
            width: 100%;
            height: 100%;
            background: rgba(79, 0, 13, 0.59);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }
    }
    div.navbar {
        height: var(--nav-height);
        background: var(--red);
        .social {
            position: absolute;
            bottom: calc(var(--nav-height) + clamp(7px, 0.714vw, 10px));
            z-index: 2;

            right: var(--grid-gap);
            li {
                a:before {
                    color: #fff;
                    font-size: clamp(15px, 1.429vw, 20px);
                }
                a:hover {
                    opacity: 0.5;
                }
            }
        }
    }
    & .container {
        height: 100%;
        position: relative;
        & #nav {
            #main {
                & > li {
                    margin: 0px;
                    & a {
                        text-transform: uppercase;
                        color: #fff;
                        text-decoration: none;
                        margin-inline: clamp(13px, 1.286vw, 18px) 0;
                        font-weight: 600;
                        font-family: var(--primary-font);
                        font-size: clamp(13px, 1.286vw, 18px);
                    }
                    &.current-menu-item,
                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }
    }
}

/* Admin Bar */

.admin-bar {
    & main {
        min-height: calc(100vh - var(--footer-height) - 32px);
    }
    & #page-head {
        top: 0px;
    }
}

/* Intro */

section {
    .container {
        padding-block: clamp(37px, 3.571vw, 50px);
    }
}

.cast-container {
    .box-container:nth-child(even){
        @media (min-width: 1024px){
            flex-direction: row-reverse;
        }
    }
}

section.introduction {
    .container {
        padding-top: 0;
        .issue-showcase {
            max-width: clamp(585px, 57.143vw, 800px);
            margin-inline: auto;
        }
        article {
            margin-top: 50px;
        }
    }
}

.paginate {
    padding-block: 20px;
    text-align: center;
    * {
        margin-inline: 10px;
    font-size: 18px;
    }
}

article.type-post {
    h1,
    h2 {
        margin-bottom: 0;
        font-size: clamp(20px, 2vw, 28px);
    }
    time {
        font-style: italic;
    }
}

.patreon-campaign-banner {
    width: 100%;
    max-width: 100vw!important;
    min-width: 100vw!important;
    .patreon-patron-button-wrapper {
        padding-block: 50px;
        display:block;
        max-width: var(--grid-width);
        margin-inline: auto!important;
        text-align: center;
    }
}

nav.comic-nav {
    margin-bottom: 30px;
    flex-wrap: nowrap;
    position: relative;
    margin-inline: auto;
    height: clamp(48px, 4.651vw, 70px);
    @media (max-width: 767px){
        flex-wrap: wrap;
        height: auto;
        padding-top: 15px;
        h1 {
            padding-bottom: 15px;
        }
    }
    .nopad {
        padding: 0!important;
        height: auto;
    }
    h1 {
        font-weight: bold;
        margin-bottom: 0;
    }
    a {
        margin-inline: var(--grid-gap);
        @media (max-width: 767px) {
            margin-inline: 5px;
        }
        font-size: clamp(16px, 1.598vw, 24px);
        color: transparent;
        font-weight: bold;
        font-family: var(--primary-font);
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
        z-index: 2;
        span {
            font-size: 0;
        }
        &:before {
            
            font-family: var(--icon-font);
            color: #FFF;
            font-size: clamp(24px, 2.33vw, 35px);
            font-weight: bold;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-content: stretch;
            align-items: center;
        }
        &.rewind:before {
            content: "\f100";
        }
        &.prev:before {
            content: "\f104";
        }
        &.next:before {
            content: "\f105";
        }
        &.fwd:before {
            content: "\f101";
        }
        &.zoom:before {
            content: "\f002";
        }
        &.disabled {
            pointer-events: none;
            filter: grayscale(1);
            opacity: .5;
        }
        &:hover {
            color: transparent;
        }
    }

    div.nav-items {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-content: flex-end;
        align-items: flex-end;
    }
}

.issue-showcase {
    .single-issue-showcase {
        text-align: center;
        color: #fff;
        .showcase-title {
            margin-block: var(--standard-font-size);
            a {
                color: #fff;
                text-decoration: none;
                transition: all 0.25s;
                &:hover {
                    opacity: 0.85;
                }
            }
        }
        figure {
            transition: all 0.25s;
            &:hover {
                opacity: 0.85;
            }
            width: 100%;
            max-width: 500px;
            aspect-ratio: 1160 / 1800;
        }
    }
}

.tax-bottom {
    margin-bottom: 50px;
    span a {
        color: #FFF!important;
    }
}
.nopad {
    padding: 0!important;
}

/* Content Settings */

.box-container { 
    min-width: calc( 100% + var(--grid-gutter) )!important; 
    margin-left: calc( -1 * var(--grid-gap) )!important;
    .box-1-4 {
        --grid-gutter: var(--grid-gap);
    }
}

.comic-archive  {
    figure {
        * {
            margin-bottom: 0;
        }
            transition: all 0.25s;
            &:hover {
                opacity: 0.85;
            }
            width: 100%;
            max-width: 500px;
            aspect-ratio: 1160 / 1800; 
    }

}

main {
    min-height: calc(100vh - var(--footer-height));
}
main :is(:not(.cta)) a {
    color: #FFF;
    text-decoration: underline;
} /* Main Link Style */

/* Form Settings */

/* Footer Settings */
#page-foot {
    font-family: var(--primary-font);
    margin-bottom: var(--standard-font-size);
    hr {
        border: none;
        border-top: 1px solid var(--red);
        margin-bottom: var(--standard-font-size);
    }
}

@media handheld, only screen and (max-width: 1179px) and (min-width: 1024px) {
    /* Under the grid width to iPad Landscape */
}

@media handheld, only screen and (max-width: 767px) {
    /* Mobile - All Mobile */

    :root {
        --header-height: 110px;
         --nav-height: 50px
    }

    /* Mobile Menu styles */

    #page-head .container .logo > * {
    }
    #page-head .container #nav {
        background: var(--red);
        min-width: 320px;
        .social {
                position: static;
    margin-inline: auto 10px;
    float: right;
        }
    }
    #page-head .container #nav #main {
    }
    #page-head .container #nav #main li a {
        padding: 20px;
    }
    #page-head .container #nav #main li ul {
    }
    #page-head .container #nav #main li ul li a {
    }
}

.mpp-valid-member-message {
    display: none !important;
}