// *** Variables ***
@import "plumber";

@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;
	}

}