/* _____________________________________________________________________________________

    Setup
_____________________________________________________________________________________ */


body{

    --readingWdith:50ch;

    --pagePad:2em;
    --fontSans: "Roboto", sans-serif;
    --fontSerif: "Libertinus Serif", serif;
    --fontMono:  "Roboto Mono", monospace;

    --linkColor:rgb(0, 148, 255);
    --linkColorAlt: rgb(122, 219, 255);
    --gridColor:rgb(120, 120, 120);
    --whiteColor:#fff;

    font-family: var(--fontMono);
    font-size:12pt;

    min-width:320px;


    @media (max-width: 600px) {
        --pagePad:1em;
    }

    @media (max-width: 480px) {
        font-size:10pt;
    }


    @media (max-width: 380px) {
        --pagePad:.5em;
    }

}

.serif{
    font-family:  var(--fontSerif);
    font-weight: 400;
    font-style: normal;
}

.sans{
    font-family: var(--fontSans);
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 75;
}

.mono{
    font-family: var(--fontMono);
    font-optical-sizing: auto;
    font-style: normal;
}


h1,h2,h3,h4,h5,h6{
    font-optical-sizing: auto;
    font-style: normal;
    letter-spacing: -.0225em;
    text-align: left !important;

}


b{font-weight: 900;}
p{
    line-height: 1.25;
    margin-bottom:1em;
    font-weight: 450;
    text-wrap: pretty;
}
p:last-child{
    margin-bottom: 0;
}
a {
    font-weight:900;
    text-decoration-thickness: 1px;
    text-underline-offset:2px;
    color:var(--linkColor);
    &:hover{
        color:#444;
    }
}





/* _____________________________________________________________________________________

    Structure
_____________________________________________________________________________________ */




#pageContainer{
    background-image: url('../img/night-bg-darkest.jpg');
    background-size: contain;
    background-position: top left;
    background-repeat: repeat;
    background-attachment: scroll;

    display:flex;
    flex-direction: column;
    min-height: 100dvh; /* Dynamic viewport height prevents mobile address bar bugs */
    min-width: 300px;

    background-color:#000;

}





#siteHeader{
    position: sticky;
    z-index: 10;
    width:100%; top:0;

    background-image: url('../img/night-bg-darkest.jpg');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    background-attachment: scroll;


    display: flex;
    flex-flow:row nowrap;
    align-items: center;
    gap:2em;

    padding:0 var(--pagePad);

    color:#fff;
    font-family:var(--fontMono);

    #siteLogo{
        display: flex;
        flex-flow: column;
        justify-content: center;
        flex:0 1 20em;

        padding:1em 0;
        a {
            width:100%;
            display: block;
            aspect-ratio: 5.37/1;
            background-image:url('/assets/img/title-hover.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: left top;
            transition:transform .05s;
            transform-origin: bottom left;

            &:hover{
                mix-blend-mode:hard-light;
            }
        }
    }


    .main-menu{
        flex:1 1 auto;

        display: flex;
        flex-flow:row wrap;
        gap:.5em 2em;
        line-height: 1;
        align-items: center;
        justify-content: flex-start;

        > li{
            display: block;

            > a {
                display: block;;
                color:#fff;
                text-decoration: none;

                &:hover{
                    color:var(--linkColorAlt);
                }
            }

        }
    }

    #callOut{
        flex:0 0 auto;
        align-self: stretch;
        display: flex;
        flex-flow:column;
        justify-content: center;
        a {
            display: inline-block;
            border-radius: 3px;
            padding:.75em 1em;
            background:var(--linkColorAlt);
            position: relative;
            color:rgba(0,0,0,0.75);
            text-decoration: none;
            cursor:pointer;
            border:none;
            &:hover{
                filter:brightness(.9);
            }
        }
    }


    @media (max-width: 760px) {
        flex-wrap:wrap;
        gap:0 2em;
        justify-content: space-between;
        height:auto;
        position:relative;

        #siteLogo{
            padding-top:1em;
            flex:1 1 14em;

        }
        .main-menu{
            justify-content: center;
            padding:1em;
            order:4;
        }
    }

}



#siteContent{
    flex: 1;
    padding:0 var(--pagePad);

    margin-top:2em;
    font-weight: 400;
    font-style: normal;

}


#siteFooter{
    flex-shrink: 0;
    width:100%;
    z-index: 2;
    img{
        display: block;
        width:100%;
        object-fit: cover;
        object-position: top left;
    }
}


/* _____________________________________________________________________________________


_____________________________________________________________________________________ */



.page-subtitle{
    position: relative;
    z-index: 2;
    padding:0 0 calc(var(--pagePad) * 2);
    max-width: 680px;
    transform:rotate(-2deg);
}

.paper-page{
    max-width: var(--readingWdith);
    font-size: 16pt;
    width:100%;
    padding:1.5rem 1.5rem 4rem;
    position: relative;
    text-align: justify;
    margin-bottom:-2rem;
    z-index: 2;
    font-family: var(--fontSerif);


    &::before {
        position: absolute;
        border-radius: .25em;
        width: 100%;
        content: '';
        inset: 0;
        filter: url(#wobble);
        z-index: -1;
        background-image: url('../img/pg-bg2.jpg');
        background-size: cover;
        background-position: top left;
        background-repeat: repeat;
        background-attachment: scroll;
    }
}






/* _____________________________________________________________________________________


_____________________________________________________________________________________ */


.pulp-circuit-issues{
    display: flex;
    flex-flow:row wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap:4em var(--pagePad);

    > * {
        flex:0 0 220px;
        max-width:calc(50vw - var(--pagePad));
    }
}


.pc-issue-wrap{
    &::after{
        content:attr(title);
        display: block;
        color:#fff;
        mix-blend-mode: difference;
        text-align: right;
        margin-top:.25em;
    }
}

.pc-issue-cover{
    display: block;
    background-color: rgba(255,255,255,0.05);
    /* pages effect */
    border:1px solid rgba(0,0,0,0.25);
	box-shadow:
		5px 0 0 -3px #f7f7f7,
		6px 0 0 -3px #ccc,
		7px 0 0 -4px #f7f7f7,
		8px 0 0 -4px #ccc,
		9px 0 0 -6px #f7f7f7,
		10px 0 0 -5px #999,
		10px 0 20px -10px  rgba(0,0,0,0.75),
        0 10px 25px 0 rgba(0,0,0,0.3)
    ;
    transition: transform 100ms ease-in-out;
    transform-origin: bottom right;

    img{
        display: block;
        width:100%;
        aspect-ratio: 7/10
    }
}

a.pc-issue-cover:hover{
    transform:rotate(-1deg) scale(1.05);
}

.pc-issue-title{
    padding:.5rem 0;
    font-weight: 900;
    font-size:1.5em;
    margin:.5em 0 0;
    color:var(--whiteColor);
    &:empty{display:none;}
}

.pc-issue-descr{
    padding: 1rem;
    font-size:.75em;
    &:empty{display:none;}
}


/* _____________________________________________________________________________________

    SHopify buy frame
_____________________________________________________________________________________ */

.shopify-buy__product{
    margin: 0;
    position: relative;


}

.shopify-buy__product__price {
    padding: .5rem;
    text-align: center;
    color:#fff;
    font-weight: 700;
    position: absolute;
    bottom:100%;
    z-index: 5;
    background:#000;
    &::after{
        content: "USD";
        font-size: .75em;
        font-weight: 300;
    }
}

.shopify-buy__btn-and-quantity{
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;

    font-family:var(--fontMono);
    font-weight:700;

    margin-top:.5em;

    .shopify-buy__quantity-container{
        display:flex;
        align-items: stretch;
        input {
            padding:.5em ;
            flex: 1; /* Allows the input to also fill the horizontal width */
            width:3em;
            text-align:center;
            background-color:rgb(244, 244, 244);
            box-shadow: inset 0px 5px 5px rgba(0, 0, 0, 0.25);
            border-radius: 5px 0 0 5px;
            border:1px solid rgba(0,0,0,0.9);
            border-right:none;
            /* Chrome, Safari, Edge, Opera */
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
              -webkit-appearance: none;
              margin: 0;
            }

            /* Firefox */
            &[type=number] {
              -moz-appearance: textfield;
            }

        }
    }


    .shopify-buy__btn-wrapper{
        display:flex;
        align-items: stretch;
        flex:1 1 100%;

        button{
            all: unset;
            display: inline-block;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            flex: 1; /* Allows the input to also fill the horizontal width */
            border:1px solid rgba(0,0,0,0.9);
            border-left:none;
            border-radius: 0 5px 5px 0;

            padding:.5em 0;
            background: var(--linkColorAlt);
            color:rgba(0,0,0,0.75);

            &:hover{
                filter:brightness(.9)
            }
            &:active{
                box-shadow: inset 0px 5px 2px rgba(0, 0, 0, 0.5);
                padding-top:.625em;
                padding-bottom:.375em;
            }

            &:focus-visible {
              outline: 2px solid currentColor;
              outline-offset: 2px;
            }
        }
    }
}





/* _____________________________________________________________________________________

    issue page
_____________________________________________________________________________________ */

.issue-preview{
    display: flex;
    flex-flow:row nowrap;
    align-items: flex-start;
    gap:2em;

    .info{
        flex:1 5 50ch;
        min-width:30ch;
    }
    .pulp-circuit-issue{
        flex:1 1 65%;
        max-width:280px;
        margin:0;
    }


    @media (max-width: 668px) {
        flex-flow:row wrap;
        justify-content:center;

        .pulp-circuit-issue{
            order:-1;
        }

    }

}

.pulp-circuit-issue{
    width:160px;
    float:right;
    margin:0 0 .5rem 1rem
}





/* _____________________________________________________________________________________

    Breakpoints
_____________________________________________________________________________________ */


@media (max-width: 1024px) {


}