/*------------------------+
 | Site: The Color Printer |
 +-------------------------*/

/* Imports
==================================================*/
@import url(https://fonts.googleapis.com/css2?family=Alegreya+SC&family=Alegreya+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Bitter:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Serif+Display&display=swap);
@import url(/styles/reset.css);
@import url(/styles/fontawesome.css);
@import url(/styles/color-printer-colors.css);


/* Fonts
==================================================*/
aside,
.combo,
figure,
.footer,
.footnotes,
.header,
.mix-parts,
.overlay-title,
.scale-labels .scale-labels-primary {
    font-family: "Alegreya Sans", sans-serif;
}
body, .scale-labels { font-family: Bitter, serif; }

.base-num,
h1, h2, h3,
.mix-num,
.overlay-num,
#plate-31 text {
    font-family: "DM Serif Display", serif;
}

.scaps, th { font-family: "Alegreya SC", serif; }


/* Basics
==================================================*/
:root {
    --bg: #fffdf8;
    --headerHeight: 74px;
}

a { color: #000; text-decoration: underline; }
a:hover { text-decoration: none; }
aside { font-size: 1rem; line-height: 1.5625; }
aside + figure { margin-top: 0; }
blockquote { margin-left: 2rem; }

body {
    background: url(/images/color-printer/bg.png);
    background-blend-mode: multiply;
    background-size: 150px;
    font-size: 1.125rem;
    line-height: 1.77;
    padding-top: var(--headerHeight);
}

cite, em, i, var { font-style: italic; }
figure { margin: 3vw 0; text-align: center; }
figcaption p { margin: 0; }
html { background: var(--bg); }
h1 { font-size: 5.96rem; line-height: 1; text-align: center; margin: 1em 0 2rem; }
h2 { font-size: 2.441rem; line-height: 1.1; margin-bottom: 1em; }
h3 { font-size: 1.563rem; line-height: 1.2; margin: 2rem 0 1rem; }
img { max-width: 100%; }
li, li p { margin-bottom: 0.5em; }
ol { list-style: decimal; margin-left: 2em; }
ol, p, ul { margin-bottom: 1em; }
section { padding: 3vw 3.75rem; }
strong { font-weight: bold; }
sup { font-size: 0.8em; vertical-align: super; }
svg { max-width: 100%; }
table { border: 1px double #000; border-width: 6px 0; }
td, th { padding: 0.3rem 1rem 0.3rem 0; }
th { line-height: 1.4; text-align: center; }
ul { list-style: disc; margin-left: 1.5em; }


/* Content
==================================================*/

/* Actions */
.action {
    background: var(--accent);
    color: #fff;
    display: inline-block;
    padding: 0.4em 2em;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
}

.action:hover { background: #fff; color: var(--accent); }

/* Base colors */
.base-img { margin-bottom: 0.5rem; position: relative; }
.base-img svg { color: var(--accent); display: block; height: auto; mix-blend-mode: multiply; width: 100%; }

.base-num {
    font-size: 2rem;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.bases {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, 1fr);
    list-style: none;
    margin: 0 0 2rem;
    text-align: center;
}

/* Blend with background */
.blend { mix-blend-mode: multiply; }

/* Blocks */
.block { column-gap: 2rem; display: grid; grid-template-columns: repeat(8, 2fr); position: relative; }
.block h2 { align-items: end; display: flex; grid-column: 2 / -2; margin-top: 2rem; position: relative; }

.block h2:after {
    content: "";
    border-top: 2px solid #000;
    flex: 1 1 auto;
    height: 0.2em;
    margin-left: 0.5em;
}

.block h2:before {
    background: #000;
    border-radius: 100%;
    bottom: 0.2em;
    content: "";
    height: 8px;
    position: absolute;
    right: 0;
    transform: translate(50%, 40%);
    width: 8px;
}

.block-full { display: block; }
.block-narrow > * { grid-column: 3 / -3; }
.block-narrow aside { grid-column: 7 / span 2; position: absolute; }
.block-wide > * { grid-column: 2 / -2; }

/* Cloth swatches */
.cloth {
    height: 70px;
    margin: 0 0.5rem 0.5rem;
    mix-blend-mode: multiply;
    position: relative;
    width: 70px;
}

.cloth svg { color: var(--accent); height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.cloth-example-label { text-align: left; width: 3rem; }
.cloth-example-step { align-items: center; display: flex; justify-content: center; margin-bottom: 1rem; }
.cloth-example-step .cloth-swatches { flex: 0 0 auto; }
.cloth-swatches { display: flex; justify-content: center; }

    /* Singles */
    .cloth-singles { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 3rem; }
    .cloth-singles .cloth { margin: 0 auto 0.5rem; }
    .cloth-singles figure { margin: 0 0 1.5rem; width: 33%; }
    
    /* Doubles */
    .cloth-doubles {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 3rem;
    }
    
    .cloth-doubles-group { display: flex; margin: 0 5%; }
    .cloth-doubles-group .cloth { margin: 0 auto; }
    .cloth-doubles-group figure { margin: 0 5px 1.5rem; width: 9rem; }
    
    /* Triples */
    .cloth-triples { margin-bottom: 3rem; }
    
    .cloth-triples-group {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        column-gap: 1rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        padding-top: 1.5rem;
    }
    
    .cloth-triples-group figure { margin: 0 0 1.5rem; }
    .cloth-triples-group figure:first-child { grid-row: 1 / span 10; }

/* Columns */
    /* Explicit */
    [class *= "columns"] { display: flex; justify-content: space-between; }
    .column { flex: 0 0 auto; }
    .columns2 .column { width: 48%; }
    .columns3 .column { width: 31%; }
    .columns4 .column { width: 23%; }
    
    /* Natural */
    [class *= "cols"] { column-gap: 4rem; text-align: left; }
    [class *= "cols"] li { break-inside: avoid; margin-bottom: 0; }
    ul[class *= "cols"] { list-style: none; }
    .cols2 { columns: 2; }
    .cols3 { columns: 3; }
    .cols-section { break-inside: avoid; }

/* Combinations */
.combinations { margin: 3vw 0; }
.combos-group { column-gap: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); }
.combos-group { border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin: 3vw 0; padding-bottom: 3vw; }
.combos-list { list-style: none; margin: 0; }
.combos-principal .combo { margin: 0 0.3rem 0 0; }
.combos-qualities { grid-column: 2 / -1; }

    /* Individual combinations */
    .combo {
        --combo-size: 2.6rem;
        display: inline-block;
        line-height: 1;
        margin: 0 1.5em 1em 0;
        mix-blend-mode: multiply;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }
    
    .combo-part {
        align-items: center;
        background: var(--accent);
        border-radius: 100em;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--combo-size);
        justify-content: center;
        width: var(--combo-size);
    }
    
    .combo-part:not(:first-child) { margin-left: -0.3em; }
    .combo-swatches { display: block; }

/* Complementary color experiments */
.complementary-experiment { margin: 0 auto; width: 70%; }
.complementary-experiment circle { fill: var(--accent); }

/* Cover */
.cover { padding: 6vw 0 0; position: relative; text-align: center; }
.cover-action { mix-blend-mode: multiply; position: relative; }
.cover-action a { color: #ff2310; display: inline-block; transition: all 0.1s ease-in-out; }
.cover-action a:hover { transform: scale(1.1); }
.cover-action i { color: #000; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -75%); }
.cover-action svg { height: 115px; width: 115px; }

.cover-bg {
    height: 35vh;
    left: 0;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
    mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    width: 100%;
}

.cover-bg img { display: block; height: 100%; object-fit: cover; width: 100%; }
.cover-content { background: none; padding: 3.75rem; }
.cover h1 { margin-bottom: 1rem; }

/* Dark */
.dark { background: var(--accent); mix-blend-mode: multiply; }
.dark, .dark .hl { color: #d3b67f; }
.dark .hl:after, .dark .hl:before { box-shadow: 0 0 1px rgb(255, 255, 255); mix-blend-mode: normal; }

/* Embossed plates */
.embossed { border: 1px solid rgba(0, 0, 0, 0.3); padding: 2rem; }

/* Figures */
.figure-title { font-weight: bold; }

/* Footer */
.footer {
    align-items: center;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
}

.footer p { margin: 0; }

/* Footnotes */
.footnotes { font-size: 1rem; }
.footnotes a[href*="ref"] { text-decoration: none; }

/* Header */
.header {
    align-items: center;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 1rem 2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.header a { text-decoration: none; }
    
    /* Brand */
    .brand, .brand img { display: block; }
    .brand:hover { opacity: 0.5; }
    
    /* Menu */
    .menu a { display: inline-block; padding: 0.3em 0.7em; transition: all 0.1s ease-in-out; }
    .menu a:hover { text-decoration: underline; }
    .menu li.current { font-weight: bold; }
    .menu li { margin: 0; }
    .menu-button { display: none; line-height: 1; }
    .menu-pages { display: flex; list-style: none; margin: 0; }

/* Highlights */
.hl {
    background: none;
    display: inline-block;
    min-height: 1.2em;
    min-width: 1em;
    padding-left: 1.7em;
    position: relative;
    white-space: nowrap;
}

.hl.c0:after, .hl.c0:before { mix-blend-mode: normal; }

.hl:after, .hl:before {
    content: "";
    display: inline-block;
    left: 0.8em;
    margin-right: 0.6em;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0.85em;
}

.hl-multi { background: none; }
.hl-multi .hl { padding-left: 1.4em; }
    
    /* Base */
    .hl-base:after {
        border: 1px solid var(--accent);
        border-radius: 100%;
        height: calc(1em + 2px);
        transform: translate(-50%, -50%);
        width: calc(1em + 2px);
    }
    
    .hl-base:before {
        border: 0.35em solid var(--accent);
        border-radius: 100%;
        box-sizing: border-box;
        height: 1em;
        transform: translate(-50%, -50%);
        width: 1em;
    }
    
    .hl-base.c0:after { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
    .hl-base.c0:before { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
    
    /* Metals */
    .hl-metal:after {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
        border-radius: 100%;
        height: 0.65em;
        mix-blend-mode: overlay;
        transform: translate(-50%, -70%);
        width: 0.65em;
    }
    
    .hl-metal:before {
        background: var(--accent);
        border-radius: 100%;
        height: 1em;
        transform: translate(-50%, -50%);
        width: 1em;
    }
    
    /* Mixes */
    .hl-mix:after {
        border: 1px solid var(--accent);
        height: calc(0.8em + 2px);
        margin-right: 0.6em;
        transform: translate(-50%, -50%) rotate(45deg);
        width: calc(0.8em + 2px);
    }
    
    .hl-mix:before {
        background: var(--accent);
        height: 0.8em;
        margin-right: 0.6em;
        transform: translate(-50%, -50%) rotate(45deg);
        width: 0.8em;
    }
    
    /* Scale */
    .hl-scale:before {
        background: var(--accent);
        border-radius: 0.2em;
        height: 1em;
        margin-right: 0.6em;
        transform: translate(-50%, -50%);
        width: 1em;
    }
    
    .hl-scale.c0:before { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
    
    /* Tints */
    .hl-tint:after {
        border: 1px solid var(--accent);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
        height: calc(0.8em + 6px);
        margin-right: 0.6em;
        transform: translate(-50%, -50%);
        width: calc(0.8em + 6px);
    }
    
    .hl-tint:before {
        background: var(--accent);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
        height: 1em;
        margin-right: 0.6em;
        transform: translate(-50%, -50%);
        width: 1em;
    }

/* Impressions */
.impressions { display: flex; justify-content: space-between; }
.impressions figure { width: 48%; }
.impressions-controls { margin-bottom: 3vw; mix-blend-mode: multiply; text-align: center; }

.slider {
    -webkit-appearance: none;
    background: var(--bg);
    display: block;
    margin: 0 auto 1em;
    width: 50%;
}

.slider::-moz-range-thumb { background: #000; border-radius: 100%; height: 1rem; width: 1rem; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; background: #000; border-radius: 100%; height: 1rem; margin-top: -10px; width: 1rem; }
.slider::-moz-range-track { background: rgba(0, 0, 0, 0.5); cursor: pointer; height: 2px; width: 100%; }
.slider::-webkit-slider-runnable-track { background: rgba(0, 0, 0, 0.5); cursor: pointer; height: 2px; width: 100%; }

/* Intro */
.intro { font-size: 2.125rem; font-weight: 300; line-height: 1.51; }

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

/* Mixtures */
.mix-img { margin-bottom: 0.6em; position: relative; }
.mix-img svg { color: var(--accent); display: block; mix-blend-mode: multiply; width: 100%; }

.mix-num {
    color: var(--foreground);
    font-size: 2rem;
    left: 50%;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mix-parts { display: flex; font-size: 1rem; justify-content: center; list-style: none; margin: 0; }
.mix-parts li { margin: 0 0.3em; }

.mixes {
    column-gap: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    list-style: none;
    margin: 3rem 0;
    row-gap: 2rem;
    text-align: center;
}

/* Originals */
.originals {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, 1fr);
    list-style: none;
    margin: 0;
}

.originals img { display: block; }
.originals li { margin: 0; }

/* Overlays */
.overlay-img { margin-bottom: 0.6em; position: relative; }
.overlay-img svg.overlay-a { position: static; }

.overlay-img svg {
    color: var(--accent);
    display: block;
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    width: 100%;
}

.overlay-num { font-size: 1.2rem; line-height: 1; }

.overlays {
    column-gap: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    list-style: none;
    margin: 3rem 0;
    row-gap: 2rem;
    text-align: center;
}

.overlays-tints {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Posters */
.poster {
    border: 1rem solid #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    margin: 3rem 0;
    position: relative;
}

.poster:after {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.poster img { display: block; width: 100%; }

/* Skip */
.skip { left: -9999em; position: absolute; }

/* Plates */
#plate-31 text { display: block; font-size: 1.574rem; height: auto; }
#plate-31 path { fill: var(--accent); }
#plate-32 .scale-label-wedges path { fill: #fff; stroke: #000; stroke-width: 2px; }
#plate-32 .scale-labels text { font-size: 2rem; }
#plate-32 .scale-labels-primary { font-weight: bold; text-transform: uppercase; }
#plate-32 .scale-wedges path { fill: var(--accent); stroke: #fff; stroke-linejoin: round; stroke-width: 18px; }

/* Tables */
.surrounding-colors td { vertical-align: middle; white-space: nowrap; }

.table {
    background:
        linear-gradient(to right, var(--bg) 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), var(--bg) 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
    margin: 3vw auto;
    overflow: auto;
}

/* Widths
==================================================*/
@media screen and (max-width: 1100px) {
    /* Basics */
    h1 { font-size: 3rem; margin: 10vw 0; }
    
    /* Content */
        /* Blocks */
        .block-narrow, .block-wide { display: block; }
        
        .block-narrow aside {
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            grid-column: 2 / -2;
            margin-bottom: 1em;
            padding: 1em;
            position: static;
        }
        
        .block-narrow aside *:last-child { margin: 0; }
        
        /* Combinations */
        .combos-group { display: block; }
        
        /* Footer */
        .footer { display: block; font-size: 0.8rem; text-align: center; }
        
        /* Header */
        .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.2rem;
            width: 100%;
        }
        
        .menu a {
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            display: block;
            padding: 0.5rem 2rem;
        }
        
        .menu li { margin: 0; }
        .menu.open { display: block; z-index: 100; }
        .menu-button, .menu-pages { display: block; }
        
        /* Intro */
        .intro { font-size: 1.5rem; }
        
        /* Mixtures */
        .mix-num { font-size: 1.4rem; }
        .mix-parts { display: block; font-size: 0.9rem; }
        .mixes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
        
        /* Originals */
        .originals { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 700px) {
    /* Basics */
    :root {
        --headerHeight: 48px;
    }
    
    body { font-size: 1rem; }
    figure { margin: 10vw 0; }
    h1 { text-align: center; }
    h2 { font-size: 1.6rem; }
    section { padding: 10vw 1rem; }
    
    /* Content */
        /* Base colors */
        .bases { grid-template-columns: repeat(3, 1fr); }
        
        /* Columns */
        .cols2, .cols3 { columns: 1; }
        [class *= "columns"] { display: block; }
        [class *= "columns"] .column { width: auto; }
        
        /* Cover */
        .cover-action svg { height: 5rem; width: 5rem; }
        .cover-bg { height: 22vh; }
        .cover-content {
            background: linear-gradient(to bottom, rgba(255,253,248,0) 0%,rgba(255,253,248,1) 5%,rgba(255,253,248,1) 100%);
            padding: 0 2rem;
        }
        
        .cover h1 img { width: 80%; }
        
        /* Footer */
        .footer { padding: 0.5rem 1rem; }
        
        /* Header */
        .brand { width: 130px; }
        .header { padding: 0.5rem 1rem; }
        
        /* Impressions */
        .impressions { display: block; }
        .impressions figure { width: auto; }
        
        /* Intro */
        .intro { font-size: 1.1rem; }
        
        /* Mixtures */
        .mix-num { font-size: 1.1rem; }
        .mixes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
        
        /* Overlays */
        .overlays { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}