// *** Variables *** @import “plumber”;

/* $header-font: ('Source Sans Pro', sans-serif); $header-baseline: 0.144500;

$body-font: ('Source Sans Pro', sans-serif); $body-baseline: 0.144500;

$gh: 1rem;

// COLOURS $color-medium: #303030;

// FONT WEIGHTS $ultraLight: 200; $light: 300; $normal: 400; $semiBold: 500; $bold: 600; $ultraBold: 900;

*/

@include plumber-set-defaults(

$font-size: 1,
$baseline: $body-baseline,
$grid-height: $gh

);

html {

font-size: 6px;
font-family: $body-font;
font-weight: $normal;
color: $color-medium;

@media (max-width: 550px) {
        font-size: 5px;
}

@media (min-width: 767px) {
        font-size: 7px;
}

@media (min-width: 1024px) {
        font-size: 8px;
}

}

body {

font-size: 16px;

}

.article {

// HEADINGS
.h1, h1, 
.h2, h2, 
.h3, h3, 
.h4, h4, 
.h5, h5, 
.h6, h6 {

        font-family: $header-font;
        font-style: normal;
        font-weight: $bold;
        letter-spacing: normal;
        opacity: 0.9;

        // WEIGHT VARIANTS
        &.ultraLight {
                font-weight: $ultraLight;
        }
        &.light {
                font-weight: $light;
        }
        &.normal {
                font-weight: $normal;
        }
        &.semiBold {
                font-weight: $semiBold;
                letter-spacing: -.05em
        }
        &.bold {
                font-weight: $bold;
                letter-spacing: -.04em
        }
        &.ultraBold {
                font-weight: $ultraBold;
                letter-spacing: -.03em
        }

}

// H1
.h1, h1 {

        @include plumber(
                $font-size: 8.4,
                $line-height: 10,
                $leading-top: 8,
                $leading-bottom: 2,
                $baseline: $header-baseline
        );

        // SIZE VARIANTS
        &.small {
                @include plumber(
                        $font-size: 6.4,
                        $line-height: 6,
                        $leading-top: 4,
                        $leading-bottom: 2,
                        $baseline: $header-baseline
                );
        }
        &.large {
                @include plumber(
                        $font-size: 9.6,
                        $line-height: 10,
                        $leading-top: 8,
                        $leading-bottom: 4,
                        $baseline: $header-baseline
                );
        }
        &.huge {
                @include plumber(
                        $font-size: 14.6,
                        $line-height: 15,
                        $leading-top: 10,
                        $leading-bottom: 4,
                        $baseline: $header-baseline
                );
        }

}

// H2
.h2, h2 {

        @include plumber(
                $font-size: 7.4,
                $line-height: 8,
                $leading-top: 6,
                $leading-bottom: 2,
                $baseline: $header-baseline
        );

        // SIZE VARIANTS
        &.small {
                @include plumber(
                        $font-size: 5.6,
                        $line-height: 6,
                        $leading-top: 4,
                        $leading-bottom: 0,
                        $baseline: $header-baseline
                );
        }
        &.large {
                @include plumber(
                        $font-size: 8.8,
                        $line-height: 9,
                        $leading-top: 6,
                        $leading-bottom: 2,
                        $baseline: $header-baseline
                );
        }
        &.huge {
                @include plumber(
                        $font-size: 11.2,
                        $line-height: 12,
                        $leading-top: 8,
                        $leading-bottom: 2,
                        $baseline: $header-baseline
                );
        }

}

// H3
.h3, h3 {

        @include plumber(
                $font-size: 6.4,
                $line-height: 8,
                $leading-top: 4,
                $leading-bottom: 0,
                $baseline: $header-baseline
        );

        // SIZE VARIANTS
        &.small {
                @include plumber(
                        $font-size: 4.8,
                        $line-height: 6,
                        $leading-top: 2,
                        $leading-bottom: 0,
                        $baseline: $header-baseline
                );
        }
        &.large {
                @include plumber(
                        $font-size: 8,
                        $line-height: 10,
                        $leading-top: 4,
                        $leading-bottom: 1,
                        $baseline: $header-baseline
                );
        }
        &.huge {
                @include plumber(
                        $font-size: 9.6,
                        $line-height: 10,
                        $leading-top: 6,
                        $leading-bottom: 2,
                        $baseline: $header-baseline
                );
        }

}

// H4
.h4, h4 {
        @include plumber(
                $font-size: 5.2,
                $line-height: 6,
                $leading-top: 4,
                $leading-bottom: 0,
                $baseline: $header-baseline
        );
}

// H5
.h5, h5 {
        @include plumber(
                $font-size: 4.4,
                $line-height: 6,
                $leading-top: 4,
                $leading-bottom: 0,
                $baseline: $header-baseline
        );
}

// H6
.h6, h6 {
        @include plumber(
                $font-size: 3.6,
                $line-height: 4,
                $leading-top: 4,
                $leading-bottom: 0,
                $baseline: $header-baseline
        );

}

// P
p, .p, .p:not(.hero)+p, p:not(.hero)+p {

        @include plumber(
                $font-size: 3.5,
                $line-height: 5,
                $leading-top: 0,
                $leading-bottom: 2,
                $baseline: $body-baseline
        );
        text-rendering: optimizeLegibility;

        // SIZE VARIANTS
        &.micro {
                @include plumber(
                        $font-size: 2.6,
                        $line-height: 4,
                        $leading-top: 2,
                        $leading-bottom: 0,
                        $baseline: $body-baseline
                );
        }
        &.small {
                @include plumber(
                        $font-size: 3,
                        $line-height: 4,
                        $leading-top: 2,
                        $leading-bottom: 0,
                        $baseline: $body-baseline
                );
        }
        &.hero {

                @include plumber(
                        $font-size: 5,
                        $line-height: 6,
                        $leading-top: 2,
                        $leading-bottom: 4,
                        $baseline: $body-baseline
                );
                font-weight: $light;
                letter-spacing: -0.16rem;
        }

}

//.slide:not(.whiteSlide) p.hero {font-weight: 400;}

// ELEMENTS

& strong {
        font-weight: $bold;
}

& em {
        font-weight: $semiBold;
}

& li {

        @include plumber(
                $font-size: 3.5,
                $line-height: 4,
                $leading-top: 0,
                $leading-bottom: 1,
                $baseline: $body-baseline
        );
        opacity: 0.8;

}

// LISTS
& ul, & ol {
        margin: 4rem 4rem 4rem 8rem;
}

& ul li {
        list-style: disc;
}

& ol li {
        list-style: decimal;
}

// BLOCKQUOTE
& blockquote {

        @include plumber(
                $font-size: 3.2,
                $line-height: 4,
                $leading-top: 6,
                $leading-bottom: 5,
                $baseline: $body-baseline
        );
        padding-left: 4rem; padding-right: 4rem;
        margin-left: 4rem; margin-right: 4rem;
        padding-top: 1rem; padding-bottom: 1rem;
        opacity: 0.9;
        border-left: 5px solid #EEE;
}

// Quote
& q {

        @include plumber(
                $font-size: 3.2,
                $line-height: 4,
                $leading-top: 6,
                $leading-bottom: 6,
                $baseline: $body-baseline
        );
        padding-left: 4rem; padding-right: 4rem;
        opacity: 0.9;
        display: block;
}
& q:before, & q:after {
        font-size: 5rem;
        line-height: 0.1rem;
        vertical-align: -1rem;
        }
& q:before {
        content: "“";
        margin-right: 1rem;
        }
& q:after {
        content: "”";
        margin-left: 1rem;
        }

}

.article p, .article li {

// Make font-weight lighter on larger screens
@media (min-width: 768px) {
        font-weight: $light;
}

}

// Make headings lighter on small screens .article h1, .article .h2, .article .h3, .article h4, .article h5, .article h6 {

@media (max-width: 550px) {
        opacity: 0.8;
}

}