/*------------------------------------*\
    #NORMALIZE/RESET
\*------------------------------------*/
/**
 * 1. Very simple reset
 * 2. Apply global `box-sizing`, as per http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
*,
*::before,
*::after {
    margin: 0; /* [1] */
    padding: 0; /* [1] */
    border: 0; /* [1] */

    box-sizing: border-box; /* [2] */
}


/**
 * 1. IE9+
 */
main {
    display: block; /* [1] */
}


/**
 * 1. Setting `vertical-align` removes the whitespace that appears below `<img>` elements when they
 *    are dropped into a page as-is
 */
img {
    vertical-align: top; /* [1] */
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1rem;
    line-height: 1;
}





/*------------------------------------*\
    #BASE
\*------------------------------------*/
/**
 * 1. As per https://medium.com/designing-medium/system-shock-6b1dc6d6596f#.takdxz1ls
 */
body {
    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI",
                 "Helvetica Neue", "Lucida Grande", sans-serif; /* [1] */
    font-size: 1.125em;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}


hr {
    height: 3px;
    margin: 10px 0;

    background-color: #000;
}


a {
    color: inherit;
}

    a:hover,
    a:focus {
        color: #5cffec;
    }

::selection {
    background-color: #fff;
}





/*------------------------------------*\
    #OBJECTS
\*------------------------------------*/
.o-wrapper {
    width: 90%;
    max-width: 1205px;
    margin-right: auto;
    margin-left: auto;
}


.o-wrapper--small {
    max-width: 960px;
}


/**
 * 1. Remove `margin` and `padding` that might affect the grid system
 * 2. Apply a negative 'margin-left' and 'margin-right' to negate the columns gutters
 * 3. Allow the grid system to be used on lists
 */
.o-grid {
    display: block;
    padding: 0; /* [1] */
    margin: 0 -5px; /* [1,2] */

    list-style: none; /* [3] */
}

    /**
     * 1. 10px grid gutter
     */
    .o-grid__item {
        display: inline-block;
        padding-right: 5px; /* [1] */
        padding-left: 5px; /* [1] */

        vertical-align: top;
    }


.o-list-inline {
    list-style: none;
}

@media (min-width: 450px) {
    .o-list-inline > li {
        display: inline-block;
    }

    .o-list-inline > li + li {
        margin-left: 2em;
    }
}





/*------------------------------------*\
    #COMPONENTS
\*------------------------------------*/
.c-page-head {
    padding-top: 20px;
    padding-bottom: 350px;

    background-color: #5cffec;
}


.c-main {
    margin-top: -320px;
}

.c-page-foot {
    padding: 25px 0;

    text-align: center;
}


.c-sticky {
    width: 270px;
    height: 240px;
}

    /**
     * 1. Force line break. Not a great way to do this, but works for the demo page
     */
    .c-sticky__item {
        position: fixed;
        z-index: 100;

        width: 290px;

        color: #fff;

        mix-blend-mode: difference;
    }

@media (min-width: 900px) {
    .c-page-head {
        padding-top: 50px;
        padding-bottom: 240px;
        margin: 10px;
    }

    .c-main {
        margin-top: -200px;
    }

    .c-sticky {
        height: 208px;

        white-space: nowrap;
    }

        .c-sticky__item {
            width: auto;
        }
}


.c-fld-grd {
    margin-top: 30px;
}

    .c-fld-grd__item {
        margin-bottom: 10px;
    }

        .c-fld-grd__item > img {
            mix-blend-mode: multiply;
        }





/*------------------------------------*\
    #UTILITY
\*------------------------------------*/
.u-1\/1 {
    width: 100%;
}

.u-1\/2 {
    width: 50%;
}

.u-1\/3 {
    width: 33.333%;
}

.u-1\/4 {
    width: 25.333%;
}


.u-alpha {
    font-size: 8rem;
    line-height: .85;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.u-beta {
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -.01em;
}

@media (min-width: 900px) {
    .u-1\/1\@large {
        width: 100%;
    }

    .u-1\/2\@large {
        width: 50%;
    }

    .u-1\/3\@large {
        width: 33.333%;
    }

    .u-1\/4\@large {
        width: 25%;
    }


    .u-alpha {
        font-size: 12rem;
    }

    .u-beta {
        font-size: 2em;
    }
}