/*-------------------------------------+
 | Site: The Natural System of Colours |
 +-------------------------------------*/


/* Imports
=====================================================================*/
@import url(https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap);
@import url(/styles/reset.css);


/* Fonts
=====================================================================*/
body { font-family: "Crimson Pro", Georgia, "Times New Roman", Times, serif; }


/* Basics
=====================================================================*/
:root {
    --gap: 1rem;
    --grid: repeat(8, 1fr);
}

a { color: #000; }
a:hover { text-decoration: none; }
blockquote p:last-child { margin: 0; }
blockquote, ol, p, ul { margin-bottom: 1.5em; }

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

cite, em, i { font-style: italic; }
figcaption { font-size: 0.8rem; text-align: center; }
html { font-size: 24px; }
img { max-width: 100%; }
li { margin-bottom: 0.5em; }

section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    justify-content: center;
    min-height: 90vh;
    padding: 6vh;
    position: relative;
}

ul { list-style: disc; margin-left: 1.5em; }



/* Content
=====================================================================*/
/* Action buttons */
.action {
    background: #000;
    color: #fff;
    display: inline-block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
}

.action:hover { opacity: 0.7; }

/* Background */
#background figure { float: right; margin: 0.5em 0 1rem 1rem; width: 40%; }

/* Blocks */
.block { display: grid; gap: var(--gap); grid-template-columns: var(--grid); }
.block-gallery { display: flex; }
.block-gallery img { flex: 0 0 auto; width: 50%; }
.block-narrow { grid-column: 3 / -3; }
.block-wide { margin: 2rem 0; grid-column: 2 / -2; }
.block-wide img { display: block; margin: 0 auto; max-height: 85vh; }

/* Data */
#data { border-top: 1px solid #ddd; }

/* Editions */
.editions { gap: 4em; padding-left: 0; padding-right: 0; }
.editions .block { padding: 0 6vh; }

/* Footer */
.copyright { font-size: 0.8rem; margin-top: 3rem; text-align: center; }
.footer { padding: 6vh; }
.footer p { margin-bottom: 1rem; }

/* Header */
.header {
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 1rem;
    position: sticky;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 100;
 }
 
.menu a { display: inline-block; padding: 0.3em 0.7em; text-decoration: none; }
.menu a:hover { text-decoration: underline; }
.menu li { margin: 0; }
.menu-button { display: none; line-height: 1; }
.menu-pages { display: flex; justify-content: center; list-style: none; margin: 0; }

/* Locked */
.locked { overflow: hidden; }

/* Highlights */
.hl-dark { background: #313131; border-radius: 0.25em; color: #d1d1d1; padding: 0.1em 0.2em; }

/* How */
#how { min-height: 0; text-align: center; }

/* Intro */
#intro {
    align-items: center;
    background: url(/images/natural-colors/cover.jpg) no-repeat 50% 50%;
    background-size: cover;
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    gap: 1rem;
    justify-content: center;
    padding: 0 25%;
    text-align: center;
}

#intro h1 { font-size: 4rem; line-height: 0.9; }
#intro h1 .line { display: block; font-size: 1.75rem; }
#intro p { margin-bottom: 1rem; }
#intro p:last-child { margin: 0; }
#intro ul { list-style: none; margin: 0; }

/* Original text */
blockquote.original-text { display: block; }
#original { background: #fff7ed; }
.original-text { background: #fff; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2); display: none; padding: 2rem; }

/* Parallax */
.parallax-bg {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: var(--grid);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.parallax-overlay {
    background: #fff;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
    padding: 2rem;
    position: relative;
}

/* Paper */
.paper-dark {
    background-color: #292929;
    color: #d1d1d1;
    background-image: url(/images/natural-colors/paper-dark.jpg);
}

.paper-dark .action { background: #fff; color: #000; }
.paper-dark, .paper-light { background-repeat: repeat; background-position: 50% 50%; background-size: 150%; }
.paper-light { background-color: #f2edd3; background-image: url(/images/natural-colors/paper-light.jpg); }

/* Posters */
.posters { display: grid; gap: 1rem; list-style: none; margin-left: 0; text-align: center; }

.posters img {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    display: block;
    margin-bottom: 1rem;
    transition: all 0.1s ease-in-out;
    width: 100%;
}

.posters .thumb:hover img { transform: scale(1.1); }
.posters-composite { grid-template-columns: repeat(2, 1fr); }
.posters-individual { grid-template-columns: repeat(4, 1fr); }


/* Widths
=====================================================================*/

@media screen and (max-width: 1000px) {
    /* Basics */
    section { padding: 3rem; }
    
    /* Content */
        /* Background */
        #background figure { display: block; float: none; margin: 0 auto 1rem; width: 60%; }
        
        /* Blocks */
        .block { display: block; }
        
        /* Header */
        .header { padding: 0.5rem 1rem; }
        
        .menu {
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            display: none;
            left: 0;
            margin: 0;
            padding: 0;
            overflow-y: auto;
            position: absolute;
            top: 3.4rem;
            width: 100%;
        }
        
        .menu a {
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: block;
            padding: 0.8rem 2rem;
        }
        
        .menu li { margin: 0; }
        .menu.open { display: block; z-index: 100; }
        .menu-button { padding: 0.7em 0.8em; }
        .menu-button, .menu-pages { display: block; }
	
	/* Intro */
	#intro { font-size: 1rem; gap: 0.5rem; padding: 0 15%; }
	#intro h1 { font-size: 2rem; }
    
    /* Posters */
    .posters-composite { grid-template-columns: repeat(1, 1fr); }
    .posters-individual { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 700px) {
    /* Basics */
    html { font-size: 18px; }
    section { padding: 1rem; }
    
    /* Content */
        /* Blocks */
        .block { display: block; }
        .block-gallery { display: block; }
        .block-gallery img { display: block; width: 100%; }
        
        /* Editions */
        .editions { gap: 2em; }
        .editions .block { padding: 0 1rem; }
        
        /* Original text */
        .original-text { background: #fff; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2); display: none; padding: 1rem; }
}