@import url('https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap');

@font-face {
  font-family: 'Nebulan Star';
  src: url('../font/NebulanStar-Regular.woff') format('woff');   /* Legacy fallback */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Prevents invisible text while loading */
}

@keyframes spin {
    0%{ transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
 
#galaxy {
    position: fixed;
    top:50%;right:50%;bottom:0;left:0;
    filter:invert(100%);
    margin-top:-20%; 
    opacity:0.05;
    animation-name: spin;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    scale:4;
}

.cover, .cover .hero{
    position:fixed;
    top:0; left:0; right:0; bottom:0; 
}

.cover {
    background-image:url(../images/page.jpg);
    background-color: rgba(250, 235, 215, 0.95); 
    background-blend-mode: exclusion;
    background-size: cover;
}

.cover .hero{ 
    background:rgba(0,0,0,0.825);
    display:flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    color:#BFBFBF !important;
}

.cover .hero h1{
    color:#EEEDED !important;
    text-transform: uppercase;
    font-size:5em;
    margin:0;
}
.cover .hero h2 {
    text-transform: uppercase;
    color:#EEEDED !important;
    font-size: 1.78em;
    margin:0;
} 

.cover .hero a{ color: #BFBFBF !important; border-color:#BFBFBF !important }

.cover .hero .hero__content{
    border-left:5px solid gray;
    position: relative;
    z-index: 1;
}
.cover .hero .hero__image-wrapper{
    background: transparent;   
    filter:invert(100%)
}
 


.pane h1,
.video-playlist .hero h1,
.page--tag.item-list .hero h1, .page--tag.item-list .pane h2 { 
    font-weight: lighter !important; font-size:1em; 
    color:silver; text-transform: uppercase; margin:0;
}
.pane h1::after 
.item-list h1::after { 
    width:50%; float:right; height:2px; background-color: silver; content: " "; margin-top:10px;
}
.pane h2, .pane h3, .pane h4{ color: #444444 !important; text-transform: uppercase; line-height: 100%; margin:0; }
.pane h3 b { color: goldenrod }

.hero p { color: #BFBFBF !important }
.pane p { color: #555555 !important }


.framed-left figure{
    position:fixed;
    top:0;left:0;right:50%;bottom:0;
    background-image: url(../images/page.jpg); 
    background-color: rgba(0, 0, 0, 0.8);
    background-blend-mode: overlay;
    margin:0 !important;
    text-align: center;
}

.framed-left figure img {
    width:40vw; height:40vw;
    object-fit: cover;
    margin-top:calc((100vh - 40vw) / 2);
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.274);
    outline:4px solid silver;
    outline-offset: -20px;
    animation-delay: 0.5s;
    background-color: white;
}

.framed-left .pane{
    position:fixed;
    top:0;left:50%;right:0;bottom:0;
    background:white;
    color:#222222;
    padding-top:100px;
    line-height: 111%;
}

.video-playlist .hero{
    background-image: url(../images/page.jpg);
    background-color: rgba(0, 0, 0, 0.8);
    background-blend-mode: overlay;
    position: absolute;
    top:0;left:0;right:0;bottom:30%;
    padding-top:calc((100vh - 40vw) / 2); 
}

.video-playlist video {
    position: fixed;
    width:40vw; height: 40vw; 
    background-color: black;
    top:calc((100vh - 40vw) / 2);
    right:10vw;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.274); 
}
.video-playlist h2, .video-playlist h3, .video-playlist h4{ color: white; text-transform: uppercase; line-height: 100%; margin:0; }

.video-playlist .entry-wrapper{
    width:35vw;height:auto;
    position: fixed;
    left:10vw; 
    padding:0 20px; margin:0; 
}

.video-playlist .pane{
    position:fixed;
    left:0; right:0; bottom:0; top:69.5%;
    background-color: white; color:#222222;
    padding-left:calc(10vw + 20px);
    padding-top:50px; 
}

.scrapbook{
    font-family: "Protest Revolution", sans-serif;
    color:midnightblue !important;
    transform: rotate(-5deg);
    position: relative;
    line-height: 78% !important;
}
.scrapbook::before{
    content: "";
    background-image: url(../images/paper2.png);
    width:120%; height:166%;
    position: absolute;
    z-index:-1;
    left:-120px; top:-36px; 
    background-size:100%;
    padding:20px;
    padding-bottom: 60px;
    transform: rotate(-3deg); 
}


.page--tag.item-list{

    .hero{
        position: fixed;
        top:0; left:50%; right:0; bottom:0;
        background-image: url(../images/page.jpg);
        background-color: rgba(0, 0, 0, 0.8);
        background-blend-mode: overlay;
        text-align: right;
        padding-top:100px;
        z-index:0;

        .page__desc p{
            font-size: small;
            margin:0px;
        }
    }

    .pane{
        background:white;
        position: fixed;
        top:0; left:0; right:50%; bottom:0;
    }

    article{
        position:fixed;
        top:10%; left:0; right:15%; bottom:7.5%;
        background:white;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
        padding:2em;
        display: flex;
        flex-direction: row-reverse; 
        justify-content: left;
        width:85vw;

        h2 a{
            color:#666666 !important;
        }

        .feed__content{
            padding:20px; 
            margin-left:20px;
            color:#555;
        }
        .feed__image { background:transparent }
        .feed__image img { margin-left:-20px }

        h3 span{
            font-size: 0.5em;
            transform:rotate(90deg);
            display:block;
            position: absolute;
            top:130px; right:-75px;
        }

        .control{
            display: flex;
            flex-direction:column;
            position:absolute;
            top:0; right:8px; bottom:50px;
            justify-content: flex-end;
            align-items: center;

            button{
                width:40px;
                padding:14px;
                text-align: center;
                color:black;
                margin:0 !important; 
            }

            button:first-of-type{ border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
            button:last-of-type{ border-top-left-radius: 0px; border-top-right-radius: 0px; }
        }
    }

    article:first-of-type{ 
        button.up { display: none }
    }
    article:last-of-type{ 
        button.dn { display: none }
    }

}

.page--tag.columns-3{
    .pane{
        position: fixed; background:white;
        top:0; left:0; right:0; bottom:0;
        margin:0; max-width: 100%;
        
        .wrapper{
            margin-top:100px;
            margin-left:0px;
        }
    }

    .columns {
        display: flex;
        justify-content: space-between;
        width:100%; margin:auto; padding:10px;
        max-width: var(--page-width);

        article{
            margin-top:0;
            zoom:0.8;
            width:90%;
            padding-right:5%;
            color:#222222;
            flex-direction: column;

            h2{
                font-size:1em; 
                a { color:#999; }
            }

            h3 { 
                font-size:1.25em;

                span{
                    font-size:0.5em !important;
                }
            }
        }

        article.featured{
            background-image:url(../images/page.jpg);
            background-color:rgba(255, 255, 255, 0.75);
            background-blend-mode: overlay;
            filter:invert(100%);
            padding:40px;
            outline:5px solid silver;
            outline-offset: -20px;
            box-shadow: 0 0 25px gainsboro;
            margin-top:-5%; margin-bottom: -5%;

            h2{
                font-size:1.5em;
                a { color:black; }
            }

            figure{
                background: transparent;
                margin:0 !important;
                height:384px; width:384px;
                text-align: center;
                
                img{
                    width:100%; height:100%;
                    object-fit: contain;
                    object-position: center
                }
            }
        }
    }
}


.wide-image {
    .hero figure{
        position: fixed;
        top:0; left:0%; right:0; bottom:70%;
        background-image: url(../images/page.jpg);
        background-color: rgba(0, 0, 0, 0.8);
        background-blend-mode: overlay;
        text-align: right; 
        z-index:0;
        margin:0; max-width: 100%;

        img{
            width:100%; height:100%;
            margin:0; padding:0;
            object-fit: contain;
        }
    }

    .pane {
        position: fixed;
        background:white;
        top:30%; left:0; right:0; bottom:0;
        padding-top:100px;
        columns:3;
        color:#555;

        h1{ column-span: all; display: inline-block; }
        h2{ margin:0 !important; column-span: all; }
    }
}

.image-left {
    .hero figure{
        position: fixed;
        top:0; left:0; right:50%; bottom:0;
        text-align: left; 
        z-index:0;
        width:100%; margin:0 !important;

        img{
            width:50%; height:100%;
            margin:0; padding:0;
            object-fit: cover;
        }
    }

    .pane {
        position: fixed;
        background:white;
        top:0; left:50%; right:0; bottom:0;
        padding-top:100px; 
        color:#555;

        .hero__content{ margin:0; padding:0 }
        h1{ column-span: all; display: inline-block; }
        h2{ margin:0 !important; column-span: all; }

        table{
            border:none;
            zoom:0.6;
            box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.868);  
            background-image:url(../images/page.jpg);
            background-color:rgba(0, 0, 0, 0.8);
            background-blend-mode: overlay;
            width:132% !important; margin-left:-15.85%;
           
            tbody{
                display:flex;
                justify-content: center;
                align-items: center;
                padding:30px;

                tr{
                    width:100%; height:100%;
                    border:none;
                    vertical-align: top;

                    td{
                        border:none;
                        background-blend-mode: overlay;
                        height:100%;
                        color:white;
                        background-color:rgba(0, 0, 0, 0.1);
                        backdrop-filter: blur(25px);
                        margin:10px !important;
                    }

                    td:nth-of-type(odd){ 
                        background-color:rgba(0, 0, 0, 0.2); 
                    }
                }
            }

            li{ margin:0 }

            h3{
                font-size:1.25em;
            }
        }
    }
}


blockquote{
    font-family: 'Protest Revolution', serif;
    color:#444;
    border:none;
    background-image: url(../images/paper2.png);
    padding-left:150px;

    p{ transform: rotate(3deg); margin-top:2px; font-size:2em; }
}
 
.magic img{
    opacity:0.025;
    z-index: -1;
    position: fixed;
    width:100% !important;
    top:0; left:0; right:0; bottom:0;
}

body > header{
    max-height: 0px !important;
}

header .logo{
    position: fixed;
    top:-6px; left:-6px;
    color:black !important; background: white;
    width:39px;
    text-align: center;
    border-radius: 32px;
    transition: all 0.5s ease;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.274);
}

header .logo:hover{ scale: 2; left:0; top:0; transform: rotate(-90deg); }

header .prev{
    position: fixed;
    bottom:0; left:0px;
    color:black !important; background:white;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.274);
    padding:10px 20px;
    border-top-right-radius: 16px;
}

header .next{
    position: fixed;
    bottom:0; right:16px;
    color:black !important; background:white;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.274);
    padding:10px 20px;
    border-top-left-radius: 16px;
    scale:1.5;
}

header .prev:hover{ background:#f4f4f4; box-shadow:0 0 5px rgba(0, 0, 0, 0.274); }
header .next:hover{ background:#f4f4f4; box-shadow:0 0 5px rgba(0, 0, 0, 0.274); }

#navpop{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:white;
    color:#222222;
    padding:2.5%;
    z-index:5000;
    outline: 5px solid silver;
    outline-offset: -20px;

    a{
        color:#222222 !important;
    }

    > ul {
        display:flex; 
        width:90%;
        justify-content: space-between;

        ul{
            font-size: small;
        }
    }

    .close{
        position: fixed;
        top:0; right:0px;
        color:black !important; background:white;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.274);
        padding:10px 20px;
        border-bottom-left-radius: 16px;
    }

    footer{
        position:fixed;
        bottom:0; left:50px;
        width:600px;
    }
}


.cube-stack{
    > .wrapper{ 
        max-width: 100%; margin:0; min-width: 100%;
        position: absolute; padding:0;
        top:0; left:0; right:0; bottom: 0; 
    }

    .hero, article{
        background:white;
        width:33.1vw; height:49.5vh; 
        box-sizing: border-box;
        padding:50px;
        position:fixed;
        color:#222222;
        min-width: 33vw; max-width: 33vw;
        min-height: 50vh; max-height: 50vh;
        overflow:hidden;
        margin:0 !important;
        display:block;
        overflow: hidden;
    }
    .hero{ 
        left:33.3vw; top:0;  
        background-image:url(../images/page.jpg);
        background-color:rgba(0, 0, 0, 0.8);
        background-blend-mode: overlay;
        color:white;
        text-align: center;
        h1{
            text-transform: uppercase;
            color:silver;
        }
    }

    .hero--noimage::after{
        background:transparent !important;
    }

    article:first-of-type { left:0; top:0; }
    article:nth-of-type(2){ left:66.6vw; top:0 }
    article:nth-of-type(3){ top:50.25vh; left:0; }
    article:nth-of-type(4){ top:50.25vh; left:33.3vw; }
    article:nth-of-type(5){ top:50.25vh; left:66.6vw; }
    article:nth-of-type(6){ top:100.5vh; left:0; }
    article:nth-of-type(7){ top:100.5vh; left:33.3vw; }
    article:nth-of-type(8){ top:100.5vh; left:66.6vw; }

    article{
        font-size: 0.8em;

        header h2 { 
            font-size:1em !important;
            a { color:gray; }
            ::after{
                width:50%; float:right; height:2px; background-color: silver; content: " "; margin-top:6px;
            }
        }
        h2{ font-size:1.5em }
        a { color:var(--accent); font-weight: bold; }
        .feed__content { transition: all 0.5s ease; }
        figure{
            position: absolute;
            top:0; left:0; right:0; bottom:0;
            z-index: -1;
            opacity:0.1;
            border-radius: 0px;
            transition: all 1s ease;    

            img {
                object-fit: cover;
            }
        }
    }

    article:hover{ 
        figure {
            opacity:1;
            z-index:1;
        }
    }
}

.image-right {
    .hero{
        figure {
            position: fixed;
            top:0; left:50%; right:0; bottom:0;
            text-align: left; 
            z-index:0;
            width:100%; margin:0 !important;

            img{
                width:50%; height:100%;
                margin:0; padding:0;
                object-fit: cover;
            }
        }
    }

    .pane {
        position: fixed;
        background:white;
        top:0; left:0; right:50%; bottom:0;
        padding-top:100px; 
        color:#555;

        .hero__content{ margin:0; padding:0 }
        h1{ column-span: all; display: inline-block; }
        h2{ margin:0 !important; column-span: all; }

        table{
            border:none;
            zoom:0.6;
            box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.868);  
            background-image:url(../images/page.jpg);
            background-color:rgba(0, 0, 0, 0.8);
            background-blend-mode: exclusion;
            width:132% !important; margin-left:-15.85%;
           
            tbody{
                display:flex;
                justify-content: center;
                align-items: center;
                padding:30px;

                tr{
                    width:100%; height:100%;
                    border:none;
                    vertical-align: top;

                    td{
                        border:none;
                        background-blend-mode: overlay;
                        height:100%;
                        color:white;
                        background-color:rgba(0, 0, 0, 0.1);
                        backdrop-filter: blur(25px);
                        margin:10px !important;
                    }

                    td:nth-of-type(odd){ 
                        background-color:rgba(0, 0, 0, 0.2); 
                    }
                }
            }

            li{ margin:0 }

            h3{
                font-size:1.25em;
            }
        }
    }
}

.hero-plus3{
    .wrapper{ max-width: 100% }
    .hero__content{ display: none }
    .columns{
        box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.868);  
        background-image:url(../images/page.jpg);
        background-color:rgba(0, 0, 0, 0.8);
        background-blend-mode: overlay;
        color:white;
        position:fixed;
        top:0; left:50%; right:0; bottom:0;
        height:100%; 
        margin:0;
        padding:4%;
        padding-left:8%; 
    }

    article{
        zoom:0.6;
        h2 a{
            color:silver;
        }
        p {
            color: #EEEDED !important;
        }
    }

    article:last-of-type{
        background:white !important;
        color:#222222 !important;
        position: fixed;
        top:0; left:0; right:50%; bottom:0;
        zoom:1; margin:0; padding:7.5%;
        h2 a{
            color:#555 !important;
        }
        p { color:#222222 !important }
    }
}

.cube-stack.no-hero{
    article h2 a::after{display:none}
    article:nth-of-type(1){ top:0; left:0; min-width:49.8vw; zoom:1; min-height: 54.6vh; }
    article:nth-of-type(2){ top:0; left:50.2vw; min-width:49.8vw; zoom:1; min-height: 54.6vh;}
    article:nth-of-type(3){ top:48vh; left:0; }
    article:nth-of-type(4){ top:48vh; left:25vw; }
    article:nth-of-type(5){ top:48vh; left:50vw; } 
    article:nth-of-type(6){ top:48vh; left:75vw; } 
    .hero {display:none}

    article:nth-of-type(3), article:nth-of-type(4), article:nth-of-type(5), article:nth-of-type(6){
        box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.868);  
        background-image:url(../images/page.jpg);
        background-color:rgba(0, 0, 0, 0.8);
        background-blend-mode: overlay;
        color:white !important;
        width:25%; max-width: 25%; min-width: 25%;
        min-height:52vh !important;
        p { color: white !important }
    }

    .feed__content{
        max-width: 100%; min-width: 100%;
    }
}

.cube-stack.thrup{
    .hero{display: none;}
    article{min-height: 100vh; max-height: 100vh;}
    article:nth-of-type(1){ top:0 !important; left:0 !important; bottom:100vh; }
    article:nth-of-type(2){ top:0 !important; left:33.33vh !important; bottom:100vh }
    article:nth-of-type(3){ top:0 !important; left:66.66vh !important; bottom:100vh; }
    article:nth-of-type(4){ top:100vh; left:0; bottom:-100vh; }
    article:nth-of-type(5){ top:100vh; left:33.33vh; bottom:-100vh }
    article:nth-of-type(6){ top:100vh; left:66.66vh; bottom:-100vh; }
}

.cube-stack.stripes{
    .hero{ display: none }
    .columns { 
        display:flex; 
        flex-direction: row-reverse;
    }
    .columns article { 
        position: relative; 
        min-height: 100vh;
        min-width: 10vw;
        max-width: 25vw;
        left:0; right:0; bottom:0; top:0; 
        font-size: 0.7em;
    }
}

.mini-stack{
    > .wrapper{ 
        max-width: 100%; margin:0; min-width: 100%;
        position: absolute; padding:0;
        top:0; left:0; right:0; bottom: 0; 
    }

    .hero{
        position: fixed;
        top:0; left:0; right:0; bottom:80vh;
        padding-top:3%;
        box-shadow:inset 0 0 25px rgba(0, 0, 0, 0.868);  
        background-image:url(../images/page.jpg);
        background-color:rgba(0, 0, 0, 0.8);
        background-blend-mode: overlay;

        h1{
            font-size:1em;
            text-transform: uppercase;
            color:silver;
            margin:0;
        }

        h2{
            color:white;
            margin:0;
            text-transform: uppercase;
        }

        figure {
            div {
                background:transparent !important;
                filter:invert(100%);
            }

            img {
                position:fixed;
                top:0; left:0; right:0; bottom:0;
                object-fit: contain;
                z-index:-1;
                scale:3;
                opacity: 0.05;
            }
        }
    }

    .columns{
        display:grid;
        grid-template-columns: 25% 25% 25% 25%; 
        grid-column-gap: 5px;
        position:fixed;
        top:20vh; left:0; right:0; bottom:0;
        width:100vw; height:80vh;
        z-index: 1;
    }

    article{  
        background:white;
        box-sizing: border-box;
        padding:40px; 
        color:#222222;  
        overflow:hidden;
        margin:0 !important;
        display:block;
        overflow: hidden;
        font-size:0.7em;

        header {margin:0}
        h2{
            font-size:1em;
            margin:0;

            a{ 
                color:#222222;
            }
        }

        z-index: 1;
    }

    article.featured{
        grid-column: span 2;
        columns:2;
        margin-top:5px !important;

        header{ column-span: 2; width:100% }
    }
}

.double-column{
    .hero figure { background-color:#151515 !important }
    .hero img{
        position:fixed;
        left:-240px;
        filter:invert(100%);
        opacity:0.05;
    }
    .pane{
        left:20%;
        columns:2;

        table{
            zoom:0.75;
            margin-left: -57px;
            filter:invert(100%);

            tbody, tr{
                display: flex;
                width:100%;
                flex-direction: column;
            }

            td{ width:100% !important }
        }
    }
}

.item-list.reversed{
    .hero{
        left:0%; right:50%;
        text-align: left;
    }

    .pane{ 
        left:50%; right:0;
    }

    article{
        left:-70% !important;
        right:0;
        flex-direction: row;

        img{
            margin-left:30px !important;
            margin-right:-20px !important;
        }

        .control{
            left:8px; right:calc(100% - 64px);
        }

        .feed__content{
            margin-left:0px !important;
        }
    }
}


@keyframes redaction {
    0% { background:white; color:black }    
    100% { color:white; background: black; text-shadow: 1px 1px 0px gray; }
}

.redacted{
    font-family: 'Courier New', Courier, monospace;
    transition-delay: 1s;
    transition: all 1s ease; 
    font-size:0.8em;
    color:black; background-color: white;
    columns:2;
    animation: redaction;
    animation-duration: .1s; 
    animation-fill-mode: both;
}

mark.highlighter{
    background-position-x: -100%;
    background-color: transparent; 
}

@keyframes highlighter {
    0%{ background-size: 0px; background:transparent; }
    100%{ background-size: 100%; background: olivedrab }
}

.xfile{ 
    animation: redaction !important;
    animation-duration: .01s !important; 
    animation-fill-mode: both !important;

    mark.highlighter{
        animation: highlighter !important;
        animation-duration: 2s !important;
        animation-fill-mode: both !important; 
    }
}

.crow{
    transform:rotate(-45deg) !important;
    margin-left:-19% !important;
    margin-top:28% !important;
    scale: 4; 
}

.hero:has(.xfile), .hero:has(.xfile) figure{
    background-color: #222 !important;
}

.heroic .gallery{
    position:fixed;
    top:0; left:100%; right:0; bottom:0;
    min-width:50vw; width:50vw; max-width: 50vw;
    min-height:100vh; height:100vh; max-height: 100vh;
    display:grid;
    margin:0 !important; padding:0 !important;
    grid-template-columns: 33% 33% 33%;

    figure{
        position:relative;
        width:100%; height:100%;
        margin:0 !important; padding:0;
        left:0; right:0;

        img{
            width:100%; height:100%;
            max-height: 25vh;
            object-fit: cover;
            object-position: center top;
            transition: all 1s ease;
            border-radius: 0px !important;
        }

        a:hover img{
            object-position: center bottom;
        }
    } 
}

.inline .gallery{
    position:fixed;
    top:50%; left:0%; right:50%; bottom:0;
    min-width:50vw; width:50vw; max-width: 50vw;
    min-height:50vh; height:50vh; max-height: 50vh;
    display:grid;
    margin:0 !important; padding:0 !important;
    grid-template-columns: 50% 50%;

    figure{
        position:relative;
        width:100%; height:25vh;
        margin:0 !important; padding:0;
        left:0; right:0;

        img{
            width:100%; height:100%;
            max-height: 25vh;
            object-fit: cover;
            object-position: center top;
            transition: all 1s ease;
            border-radius: 0px !important;
        }

        a:hover img{
            object-position: center bottom;
        }
    }
}

.updog{
    margin-top:-50px !important;
}

.less-wumbo{
    zoom:0.9;
}

.linky { zoom:1.25; color: teal !important; }
.linky:hover{text-decoration: underline;}

.navbar__submenu{
    margin-top:0px !important;
}

.post-template .wrapper, .columns-3 > .wrapper{
    min-width:100%;
    box-sizing: border-box;
    padding-left:calc(10vw + 20px); padding-right:10vw;
}

.columns-3 header .wrapper{
    padding-left: 20px !important;
}


@media print {
    header .logo, header .next, header .prev, .dn, .up{
        display:none !important;
    }

    .cube-stack .hero{
        position:absolute !important;
    }

    .hero h1, .hero h2, .hero p{ color:white !important; }
    .pane h1, .pane h2, .pane p{ color:#222222 !important; }
    .hero-plus3 article p, .cube-stack.no-hero article p { color: white !important; }
    .hero-plus3 article:last-of-type p, .cube-stack.no-hero article:first-of-type p, .cube-stack.no-hero article:nth-of-type(2) p { 
        color: black !important; 
    }

    h2.scrapbook { color: midnightblue !important }

    .item-list .feed__item{ max-height:65%; min-width: 90%; }
    .double-column .hero figure{ background-color: #151515 !important; }
    .mini-stack .hero__content .wrapper { padding-top:2.5vh !important; text-align: center !important; }

    body:has(.crow){ background:#151515; }
    .crow {
        /*scale:3.25 !important;
        margin-left:15% !important;
        margin-top:14% !important;*/
        scale:3.9 !important;
        position:relative;
        left:-12.5% !important;
        top:5% !important;
        background-color:#151515 !important;
        width:65% !important;
    }

    .hero, .hero__image:not(.cover .hero__image), table, tbody, .hero-plus3 .columns { 
        background: #151515 !important; background-image: none !important; 
    }

    .cube-stack figure img { display:none !important }
    .cube-stack article, article.featured, blockquote { background-image: none !important; box-shadow: none !important; }
    .mini-stack .hero__image { display:none !important }
    *{ box-shadow: none !important; }
    .item-list .pane { background:#f4f4f4 !important }
    .cover .hero img { background-color: transparent !important; }
    
}

@media (orientation: portrait) {
    header.top .logo { display:none }
    .navbar__toggle { position:fixed !important; left:-22px; top:-12px; }

    .cover .hero {
        flex-direction: column-reverse;

        header{
            border-left: none !important;
            .wrapper{ font-size:3vw }
        }
    }

    .framed-left {
        .hero__image { display:none }
        .pane{
            left:0 !important;
            width:100vw;
        }
    }

    .video-playlist{
        .pane{ display:none }
        .hero { 
            padding-top:3rem !important;
            bottom:0 !important;

            .scrapbook::before{
                width:100vw !important;
            }

            .entry-wrapper{
                width:73vw !important;
             
                video{
                    position: inherit !important;
                    width:100% !important;
                }
            }
        }
    }

    .item-list{
        .hero{ padding-top:3rem !important }
        article{
            flex-direction: column !important;
            padding:1em;
            padding-left:50px;
            max-height: 100%;
            width:100vw !important;

            .feed__content { 
                padding:0px !important;
                margin-left:30px !important;
                width:calc(100% - 1em);
                height:100%;
                overflow: auto;
                position: relative;
                z-index: 1;
            }

            h3 span{
                position: inherit !important;
                transform: none !important;
            }
            
            .control{ display:none !important }
            .feed__image{
                position: fixed !important;
                top:32px; left:8px;
                z-index:0;

                img{ max-width:48px; max-height: 48px; margin-left: 0px !important }
            }
        }
    }

    .item-list.reversed{
        article{
            left:-100% !important;

            figure{
                top:62.5%;
                left:2em;

                img{
                    width:90vw; max-width: calc(90vw - 2em);
                    max-height:30%;
                }
            }
        }
    }

    .columns-3{
        .wrapper { padding:2em !important; overflow: auto; }
        header{ 
            padding-bottom: 0 !important;
            .wrapper{
                margin-top:0px !important;
                padding:0 0 1em 0 !important;
                margin-bottom: 3em;
                border-bottom: 1px double #222222;
                text-align: center;
            }
        }
        .columns{
            flex-direction: column;
            padding:0px !important;

            article{
                width:100% !important;
                margin-bottom:5em;
            }
        }
    }

    .wide-image{
        .pane {
            overflow: auto;
            columns: 1 !important;
            padding-top:3em !important;
            
            display:flex;
            flex-direction: column;
            padding-bottom:100px;
        }
    }

    .image-left, .image-right{
        .hero{
            display:flex;
            flex-direction: column;

            > figure, > div{
                width:100vw !important;height:100vh;
                position: inherit !important;
                left:0 !important; right:0 !important;
                overflow: auto;
            }

            figure img{ width:100%; object-fit: contain; }

            tbody{
                flex-direction: column;
            }

            tr { display:flex; flex-direction: column;}
            td{ width:100% !important;padding:1em 2em !important }
            td ul { columns:2 }
            blockquote {
                padding-left:0 !important;
                background-size:120%; background-position: center;
                text-align: center;
            }
        }
    }

    .cube-stack {
        display:flex;
        flex-direction: column;
        width:100vw; height:100vh;
        overflow:auto;

        .hero{ 
            width:100%; min-width: 100%;
            height:25vh !important; min-height: 25vh;
            position: inherit !important;
        }

        .wrapper { top: 25vh }

        .columns{
            display:flex;
            flex-direction: column; 

            article{
                width:100vw !important; min-width:100vw !important;
                position: inherit !important;

                h2 a::after{ width:20% }
            }
        }
    }

    .cube-stack.no-hero, .cube-stack.stripes {
        .wrapper { top:0 !important }
        article{
            min-height: 25vh !important;
            max-height: 100vh;
            height:auto !important;
        }
    }

    .cube-stack.stripes {
        overflow:auto;  

        .wrapper{ max-height: 1000vh !important; min-height: 305vh; }

        .columns{
            min-width: 100vw !important;
            min-height: 100vh;
            position: inherit;
            flex-direction: column-reverse !important;
            
            article{
                position: unset !important;
                height: auto !important;
                max-height: unset !important;
            }
        }
    }

    .hero-plus3 {
        .pane { padding:0 !important; margin:0 !important; }
        .columns{
            display: flex;
            flex-direction: column-reverse;
            left:0; right:0; width:100vw;
            margin:0 !important; padding:0 !important;
            position: inherit !important;
            padding-bottom: 6em;

            article{
                width:100vw; left:0; right:0; 
                position: inherit;
            }

            article:not(.magictime){
                min-width: 100vw; max-width:calc(100vw - 6em);
                margin:3em; zoom:0.8;
            }
        }
    }

    .double-column {
        .hero figure { display:none }
        .pane { columns: 1 !important; padding-bottom: 6em; display:flex; flex-direction: column; }

        table{
            zoom:1 !important;
            max-width:107vw !important;
        }
    }

    .mini-stack{
        .hero{
            max-width: 100vw !important;
            height:20vh; max-height: 25vh;
            padding-top:3em;
        }

        .columns{
            display: flex !important;
            flex-direction: column;
            position: inherit !important;
            height: 231vh !important; 

            article{
                padding:3em !important;
                height: auto !important; max-height: unset !important;
            }

            article.featured{
                columns: 1 !important;
                margin-top:0px !important;
            }
        }
    }

    .crow, .birdcage { display:none }
    .xfile{ 
        position:fixed;
        top:0; left:0; right:0; bottom:0;
        width:100vw; height:100vh;
    }

    .gallery-wrapper.heroic{ display:none }
    .gallery-wrapper:not(.heroic) .gallery{
        min-width:100vw;
    }

    .gallery img{ object-fit: cover !important; }

    .downwardsfacingdog{ margin-top:6em !important}

}