@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;700&display=swap');


/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background-color: #e8e1cf;
    color: #171714;

    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    line-height: 1.55;

    /*
       OLD PAPER / PRINT TEXTURE

       Two slightly different dot scales keep this from
       looking like a perfectly generated computer pattern.
       The result is closer to cheap vintage paper / ink.
    */
    background-image:
        radial-gradient(
            rgba(23, 23, 20, .045) 1px,
            transparent 1px
        ),
        radial-gradient(
            rgba(23, 23, 20, .018) 1px,
            transparent 1px
        );

    background-size:
        5px 5px,
        11px 11px;

    background-position:
        0 0,
        2px 3px;
}


/* ---------------------------------------------------------
   PAPER / PAGE
   --------------------------------------------------------- */

#content {
    width: min(1180px, calc(100% - 40px));
    max-width: none;
    margin: 0 auto;
    padding: 40px 0 100px;
}


/* ---------------------------------------------------------
   MAIN TITLE
   --------------------------------------------------------- */

.site-banner {
    position: relative;

    margin: 0 0 60px;
    padding: 35px 30px 25px;

    background-color: #d71920;
    color: #e8e1cf;

    /*
       Subtle ink texture.
       Dark dots are intentionally very faint so the red
       still reads as a solid block from a distance.
    */
    background-image:
        radial-gradient(
            rgba(23, 23, 20, .10) 1px,
            transparent 1px
        ),
        radial-gradient(
            rgba(23, 23, 20, .035) 1px,
            transparent 1px
        );

    background-size:
        5px 5px,
        13px 13px;

    background-position:
        0 0,
        3px 4px;

    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: .78;
    letter-spacing: -0.07em;
    text-transform: uppercase;

    border: 8px solid #171714;

    box-shadow:
        14px 14px 0 #171714;

    transform: rotate(-1deg);

    width: fit-content;
    max-width: calc(100% - 40px);
    margin: 20px auto 60px;
    padding: 25px 30px;

    font-size: clamp(2rem, 8vw, 7rem);
    overflow-wrap: anywhere;
}

    
.site-banner a {
    color: inherit;
    text-decoration: none;
}

.site-banner a:hover {
    background: transparent;
    color: inherit;
}

p.post-meta {
    margin: 0 0 80px;
    padding: 0 30px;

    /* font-family: "IBM Plex Mono", monospace; */
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: #d71920;
}
/* h1.title::after {
    content: "СТУДИЯ / VIDEO GAMES / NO FUTURE";

    display: block;

    margin-top: 25px;

    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(.65rem, 1.5vw, 1rem);
    font-weight: 700;
    letter-spacing: .08em;

    color: #171714;
} */
.site-banner::after {
    content: "";
    position: absolute;

    background-image: url("assets/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 300px;
    height: 300px;

    /* Bottom-right stamp placement */
    bottom: -250px;
    right: 300px;
    transform: rotate(-15deg);
    pointer-events: none;
}

/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

.outline-2 {
    position: relative;

    margin: 0 0 110px;
    padding: 35px;

    border-top: 8px solid #171714;
}
.outline-2 > h1,
.outline-2 > h2 {
    margin: -65px 0 45px;

    display: inline-block;

    padding: 8px 18px;

    background-color: #171714;
    color: #e8e1cf;

    /*
       Tiny light halftone in the black ink.
    */
    background-image:
        radial-gradient(
            rgba(232, 225, 207, .055) 1px,
            transparent 1px
        );

    background-size: 5px 5px;

    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: .9;
    letter-spacing: -.04em;
    text-transform: uppercase;

    transform: rotate(-1deg);
}

.outline-2 > h1 {
    font-size: clamp(2.4rem, 5.5vw, 5rem);
}

/* H2 keeps its original size */
.outline-2 > h2 {
    font-size: clamp(2rem, 5vw, 4.5rem);
}
/* ---------------------------------------------------------
   INTRO / HERO
   --------------------------------------------------------- */

#outline-container-org0cb3a15 {
    min-height: 500px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;

    align-items: center;

    background-color: #e8e1cf;

    background-image:
        linear-gradient(
            135deg,
            transparent 0 48%,
            #171714 48% 49%,
            transparent 49%
        ),
        radial-gradient(
            rgba(23, 23, 20, .035) 1px,
            transparent 1px
        );

    background-size:
        auto,
        5px 5px;

    border-bottom: 12px solid #d71920;
}

#outline-container-org0cb3a15 > h2 {
    grid-column: 1;

    align-self: center;

    margin: 0;

    background: transparent;
    color: #171714;

    padding: 0;

    font-size: clamp(3rem, 7vw, 7rem);
    line-height: .82;

    transform: rotate(-2deg);
}

#outline-container-org0cb3a15 .outline-text-2 {
    grid-column: 2;
}

#outline-container-org0cb3a15 .figure {
    margin: 0;
}


/* ---------------------------------------------------------
   IMAGES
   --------------------------------------------------------- */

.figure {
    position: relative;
    margin: 2em 0;
}

.figure p {
    margin: 0;
}

/* .figure img { */
/*     display: block; */

/*     width: 100%; */
/*     height: auto; */

/*     border: 6px solid #171714; */

/*     filter: grayscale(100%) contrast(1.15); */

/*     box-shadow: */
/*         10px 10px 0 #d71920; */
/* } */
.figure img {
    display: block;

    width: 100%;
    height: auto;

    border: 6px solid #171714;

    box-shadow:
        10px 10px 0 #d71920;
}

/*
   PRINT / INK TEXTURE OVER IMAGES

   The pseudo-element sits over the image and uses
   multiply blending, making the dots feel like ink
   printed into the photograph rather than a digital
   overlay floating above it.
*/

.figure::after {
    content: "";

    position: absolute;
    inset: 6px;

    pointer-events: none;

    background:
        radial-gradient(
            rgba(0, 0, 0, .12) 1px,
            transparent 1px
        );

    background-size: 5px 5px;

    mix-blend-mode: multiply;

    opacity: .65;
}


/* Hero image gets special treatment */

#outline-container-org0cb3a15 .figure img {
    max-height: 600px;
    object-fit: cover;

    box-shadow:
        18px 18px 0 #171714;
}


/* ---------------------------------------------------------
   GAMES
   --------------------------------------------------------- */

#games + .outline-text-2 {
    display: none;
}


/*
   Turn the child Org sections into brutal game cards.
*/

#outline-container-games {
    padding-bottom: 20px;
}

#outline-container-games > .outline-3 {
    display: grid;
    grid-template-columns: minmax(180px, .65fr) 1fr;
    gap: 30px;

    margin: 0 0 50px;
    padding: 30px;

    background-color: #171714;
    color: #e8e1cf;

    /*
       Very subtle light grain inside black cards.
    */
    background-image:
        radial-gradient(
            rgba(232, 225, 207, .045) 1px,
            transparent 1px
        ),
        radial-gradient(
            rgba(232, 225, 207, .018) 1px,
            transparent 1px
        );

    background-size:
        5px 5px,
        11px 11px;

    background-position:
        0 0,
        2px 3px;

    border: 5px solid #171714;

    box-shadow: 12px 12px 0 #d71920;
}

#outline-container-games {
    padding-bottom: 20px;
    border-top: none;
}

.outline-3 h3 {
    margin: 0;

    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: .85;
    letter-spacing: -.05em;
    text-transform: uppercase;

    color: #e8e1cf;
}

.outline-3 .outline-text-3 {
    font-size: 1rem;
}

.outline-3 p {
    max-width: 55ch;
}


/*
   Game images.
*/

#outline-container-games .figure {
    margin-top: 30px;
}

#outline-container-games .figure img {
    border-color: #e8e1cf;
    box-shadow: 8px 8px 0 #d71920;
}


/* ---------------------------------------------------------
   ABOUT
   --------------------------------------------------------- */

#outline-container-about {
    background-color: #f1ead8;

    /*
       Lighter paper surface with its own grain so the
       texture doesn't disappear over the body background.
    */
    background-image:
        radial-gradient(
            rgba(23, 23, 20, .04) 1px,
            transparent 1px
        ),
        radial-gradient(
            rgba(23, 23, 20, .015) 1px,
            transparent 1px
        );

    background-size:
        5px 5px,
        11px 11px;

    background-position:
        0 0,
        2px 3px;

    border: 5px solid #171714;
    border-top: 18px solid #d71920;

    padding: 50px;

    box-shadow: 15px 15px 0 #171714;
}

#outline-container-about > h2 {
    background-color: #d71920;
    color: #171714;

    background-image:
        radial-gradient(
            rgba(23, 23, 20, .09) 1px,
            transparent 1px
        );

    background-size: 5px 5px;
}

#outline-container-about .outline-text-2 {
    max-width: 750px;

    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.35;
}

#outline-container-about p {
    margin: 0 0 1.5em;
}


/* ---------------------------------------------------------
   DEVLOG
   --------------------------------------------------------- */

#outline-container-devlog {
    min-height: 250px;

    background-color: #e8e1cf;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 30px,
            rgba(23, 23, 20, .08) 31px
        ),
        radial-gradient(
            rgba(23, 23, 20, .035) 1px,
            transparent 1px
        );

    background-size:
        auto,
        5px 5px;
}

#outline-container-devlog > h2 {
    background-color: #171714;
    color: #d71920;

    background-image:
        radial-gradient(
            rgba(232, 225, 207, .05) 1px,
            transparent 1px
        );

    background-size: 5px 5px;
}


/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */

p {
    margin: 0 0 1.2em;
}

a {
    color: #d71920;
    font-weight: 700;
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
}

a:hover {
    background: #d71920;
    color: #e8e1cf;
    text-decoration: none;
}


/* ---------------------------------------------------------
   SELECTION
   --------------------------------------------------------- */

::selection {
    background: #d71920;
    color: #e8e1cf;
}


/* ---------------------------------------------------------
   SMALL PRINT / ORG BITS
   --------------------------------------------------------- */

.timestamp {
    color: #d71920;
}

.tag {
    background: #171714;
    color: #e8e1cf;

    background-image:
        radial-gradient(
            rgba(232, 225, 207, .05) 1px,
            transparent 1px
        );

    background-size: 5px 5px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 750px) {

    #content {
        width: calc(100% - 24px);
        padding-top: 20px;
    }

    .site-banner {
        margin-bottom: 60px;
        padding: 25px 20px;

        border-width: 5px;

        box-shadow: 8px 8px 0 #171714;
    }

    .site-banner::after {
        width: 85px;
        height: 85px;
        bottom: -25px;
        right: -25px;
    }
    
    p.post-meta {
	margin-bottom: 60px;
	padding: 0 20px;
	font-size: 0.75rem;
    }
    .outline-2 {
        margin-bottom: 70px;
        padding: 20px;

        border-top-width: 5px;
    }

    .outline-2 > h2 {
        margin-top: -42px;
        margin-bottom: 30px;

        font-size: 2.4rem;
    }

    #outline-container-org0cb3a15 {
        display: block;
        min-height: 0;
    }

    #outline-container-org0cb3a15 > h2 {
        margin-bottom: 40px;
        font-size: 3.5rem;
    }

    #outline-container-games > .outline-3 {
        display: block;

        padding: 22px;

        box-shadow: 7px 7px 0 #d71920;
    }

    #outline-container-games > .outline-3 h3 {
        margin-bottom: 25px;
    }

    #outline-container-about {
        padding: 30px 25px;

        box-shadow: 8px 8px 0 #171714;
    }

    #outline-container-about .outline-text-2 {
        font-size: 1.15rem;
    }

}


/* ---------------------------------------------------------
   PRINT
   --------------------------------------------------------- */

@media print {

    body {
        background: white;
        background-image: none;
        color: black;
    }

    .site-banner.title,
    .outline-2,
    .outline-3 {
        box-shadow: none;
        background-image: none;
    }

    .figure::after {
        display: none;
    }

    #content {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   ORIGINAL PALETTE
   ---------------------------------------------------------

   OLD PAPER       #e8e1ce
   INK             #161616
   PROPAGANDA RED  #c62d22
   MUSTARD         #e7bd35
   INDUSTRIAL BLUE #263f59

*/