/*
    Title
*/
main,
article {
	h1,
	h2,
	h3,
	h4,
	h5 {
		position: relative;
		font-weight: 600;
	}

	h1 {
		font-size: calc(1em * (#{coat(heading-step)} * 6));
		font-family: coat(heading-font-family);
		line-height: 1;
		@include coat-auto(heading, h1);
	}
	h2 {
		font-size: calc(1em * (#{coat(heading-step)} * 5));
		font-family: coat(heading-font-family);
		line-height: 1.25;
		@include coat-auto(heading, h2);
	}
	h3 {
		font-size: calc(1em * (#{coat(heading-step)} * 4));
		font-family: coat(heading-font-family);
		line-height: 1.25;
		@include coat-auto(heading, h3);
	}
	h4 {
		font-size: calc(1em * (#{coat(heading-step)} * 3));
		font-family: coat(heading-font-family);
		line-height: 1.5;
		@include coat-auto(heading, h4);
	}
	h5 {
		font-size: calc(1em * (#{coat(heading-step)} * 2));
		font-family: coat(heading-font-family);
		line-height: 1.75;
		@include coat-auto(heading, h5);
	}

	h6 {
		font-weight: bold;
		font-size: calc(1em * (#{coat(heading-step)} * 1));
		font-family: coat(heading-font-family);
		line-height: 1;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		@include coat-auto(heading, h6);
	}

	.header-anchor {
		position: absolute;
		right: 100%;
		text-decoration: none;
		@include coat-auto(header-anchor);
	}
	/*
	Paragraphs
*/
	p {
		font-size: 1em;
		line-height: 1.75;
	}

	.blog-meta a,
	article a,
	li a,
	p > a {
		position: relative;
		z-index: 1;
		display: inline-block;
		@include coat-auto(link);
	}
	ul a,
	p a {
		&[aria-label]::before,
		&[href]::before {
			content: attr(href);
			position: absolute;
			top: 100%;
			left: 50%;
			z-index: 2;
			display: block;
			white-space: nowrap;
			transform: translateX(-75%) translateY(0%) scale(0.85);
			opacity: 0;
			transition: coat(transition-time);
			@include coat-auto(link-preview);
		}
	}
	p a[aria-label]::before {
		content: attr(aria-label);
	}
	p a:hover::before {
		transform: translateX(-50%) translateY(-0%) scale(1);
		opacity: 1;
	}
}