@layer typography {
	/* Font Face Declarations */

	@font-face {
		font-family: 'Druk Heavy';
		src: url('../assets/fonts/Druk-Heavy-Web.woff2') format('woff2');
		font-weight: 900;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Druk Heavy';
		src: url('../assets/fonts/Druk-Heavy-Italic-Web.woff2') format('woff2');
		font-weight: 900;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'Druk Medium';
		src: url('../assets/fonts/Druk-Medium-Web.woff2') format('woff2');
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Druk Wide';
		src: url('../assets/fonts/Druk-Wide-Medium-Web.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'Druk Wide';
		src: url('../assets/fonts/DrukWide-MediumItalic.woff2') format('woff2');
		font-weight: normal;
		font-style: italic;
		font-display: swap;
	}

	/* Set shorter line heights on headings and interactive elements */

	h1,
	h2,
	h3,
	h4,
	button {
		line-height: 1.1;
		text-transform: var(--text-transform);
		letter-spacing: var(--letterspacing-neutral);
	}

	/* Balance text wrapping on headings */

	h1,
	.h1,
	.jumbo-text,
	h2,
	h3,
	h4 {
		text-wrap: balance;
	}

	/* A elements that don't have a class get default styles */

	a:not([class]) {
		-webkit-text-decoration-skip: ink;
		text-decoration-skip-ink: auto;
		color: currentColor;
	}

	/* Make images easier to work with */

	img,
	picture {
		max-width: 100%;
		display: block;
	}

	/* Inherit fonts for inputs and buttons */

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	/* Make sure textareas without a rows attribute are not tiny */

	textarea:not([rows]) {
		min-height: 10em;
	}

	:is(h1, .h1, .jumbo-text, h2, h3, h4) {
		font-family: var(--font-heading);
		line-height: var(--leading-heading);
		text-wrap: balance;
	}

	h1,
	.h1 {
		font-size: var(--step-8);
		max-width: 20ch;
	}

	h2 {
		font-size: var(--step-7);
		max-width: 35ch;
	}

	h3 {
		font-size: var(--step-5);
		max-width: 35ch;
	}

	:is(h1, h2, h3, h4, .h1, .jumbo-text):where(
			[class*='text-step-10'],
			[class*='text-step-11'],
			[class*='text-step-12']
		) {
		line-height: var(--leading-heading);
		font-weight: var(--font-black);
	}

	:is(h4, h5, h6) {
		font-size: var(--step-3);
	}

	small {
		font-size: var(--step-0);
	}

	ins {
		text-decoration: none;
		background: var(--color-primary);
		color: var(--color-dark);
		padding-inline: 0.3em;
	}

	:is(code, kbd, samp) {
		font-family: monospace;
		padding: 0.2em 0.2em 0.05em 0.2em;
		-webkit-hyphens: none;
		-ms-hyphens: none;
		hyphens: none;
		-moz-tab-size: 2;
		-o-tab-size: 2;
		tab-size: 2;
		text-align: left;
		word-spacing: normal;
		word-break: normal;
		word-wrap: normal;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	/* This is quite a new property, so we want code styles to at least, not be huge or tiny */

	@supports not (font-size-adjust: from-font) {
		:is(code, kbd, samp) {
			font-size: 0.8em;
		}
	}

	pre:has(code) {
		width: -webkit-max-content;
		width: -moz-max-content;
		width: max-content;
		max-width: 100%;
		overflow-x: auto;
	}

	pre code {
		border: none;
		background: none;
		padding: 0;
	}

	kbd {
		border: 1px solid;
		-webkit-padding-after: 0.1em;
		padding-block-end: 0.1em;
	}

	var {
		font-style: normal;
		font-weight: var(--font-medium);
	}

	q {
		font-style: italic;
	}

	ul {
		-webkit-padding-start: 1.7ch;
		padding-inline-start: 1.7ch;
	}

	ul:not([class]) > li {
		-webkit-padding-start: var(--space-xs);
		padding-inline-start: var(--space-xs);
	}

	:is(ol, ul):not([class]) li + * {
		-webkit-margin-before: var(--flow-space, var(--space-xs));
		margin-block-start: var(--flow-space, var(--space-xs));
	}

	ul ::marker {
		font-size: 0.8lh;
	}

	ol ::marker {
		font-size: 1em;
		font-weight: var(--font-bold);
	}

	/* Lists with classes and roles will be out of standard flow, so remove the default spacing */

	[role='list'][class],
	[role='tablist'][class] {
		margin-block: 0;
		padding: 0;
	}

	dt {
		font-weight: var(--font-medium);
	}

	dt + dd {
		-webkit-margin-before: var(--space-xs);
		margin-block-start: var(--space-xs);
	}

	dd + dt {
		-webkit-margin-before: var(--space-s);
		margin-block-start: var(--space-s);
	}

	dd {
		-webkit-margin-start: 1.5ch;
		margin-inline-start: 1.5ch;
	}

	blockquote {
		margin-inline: 0;
		color: var(--color-light);
	}

	blockquote footer {
		-webkit-margin-before: var(--space-s);
		margin-block-start: var(--space-s);
		color: var(--color-primary);
		font-size: var(--step-0);
	}

	blockquote q {
		font-style: normal;
	}

	:is(video, iframe[src*='youtube'], iframe[src*='vimeo']) {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}

	:is(img, picture) {
		height: auto;
		max-width: 100%;
		display: block;
	}

	picture {
		width: -webkit-max-content;
		width: -moz-max-content;
		width: max-content;
	}

	figcaption {
		-webkit-padding-before: 0.5em;
		padding-block-start: 0.5em;
		font-size: var(--step-0);
		font-family: var(--font-mono);
	}

	table {
		border: var(--stroke);
		border-collapse: collapse;
		width: 100%;
	}

	th {
		text-align: left;
		font-weight: var(--font-bold);
		line-height: var(--leading-fine);
		background: rgb(0 0 0 / 2%);
	}

	thead th {
		padding-block: var(--space-s);
	}

	td,
	th {
		padding: var(--space-xs) var(--space-s);
	}

	th:not(:only-of-type) {
		-webkit-border-after: var(--stroke);
		border-block-end: var(--stroke);
	}

	th:only-of-type {
		-webkit-border-end: var(--stroke);
		border-inline-end: var(--stroke);
	}

	:is(th, td) ~ :is(th, td) {
		-webkit-border-start: var(--stroke);
		border-inline-start: var(--stroke);
	}

	tr + tr :is(th, td) {
		-webkit-border-before: var(--stroke);
		border-block-start: var(--stroke);
	}

	caption {
		caption-side: bottom;
		-webkit-margin-before: var(--space-s);
		margin-block-start: var(--space-s);
	}

	a:not([class]):hover {
		text-underline-offset: 0.2lh;
	}

	:is(h1, h2, h3, h4) a:not([class]) {
		text-decoration-thickness: 0.1ex;
		text-underline-offset: 0.2ex;
	}

	:is(h1, h2, h3, h4) a:not([class]):hover {
		text-underline-offset: 0.3ex;
	}

	:focus {
		outline: none;
	}

	:focus-visible {
		outline: 2px solid var(--focus-color, currentColor);
		outline-offset: var(--focus-offset, 0.2lh);
	}

	:target {
		scroll-margin-block: 5lh;
	}

	::-moz-selection {
		color: var(--color-dark);
		background: var(--color-light);
	}

	::selection {
		color: var(--color-dark);
		background: var(--color-light);
	}

	.headline {
		--repel-vertical-alignment: baseline;
		--gutter: var(--space-s);

		-webkit-padding-after: var(--space-2xl);

		padding-block-end: var(--space-2xl);
		-webkit-border-after: var(--stroke);
		border-block-end: var(--stroke);
	}

	.headline__heading {
		font-size: var(--step-10);
		line-height: var(--leading-flat);
		font-weight: var(--font-black);
	}

	.eyebrow {
		opacity: 0.5;
		text-transform: none;
		font-weight: var(--font-semibold);

		&:before {
			content: '[';
			-webkit-margin-end: 0.25ch;
			margin-inline-end: 0.25ch;
		}

		&:after {
			content: ']';
			-webkit-margin-start: 0.25ch;
			margin-inline-start: 0.25ch;
		}
	}

	.lead {
		font-weight: var(--font-medium);
		line-height: var(--leading-standard);
	}
}