@charset "UTF-8";

@property --A-regular {
	syntax: "*";
	inherits: true;
	initial-value: "wdth" 90, "wght" 390, "slnt" 0;
}

@property --A-semibold {
	syntax: "*";
	inherits: true;
	initial-value: "wdth" 90, "wght" 700, "slnt" 0;
}

@property --A-bold {
	syntax: "*";
	inherits: true;
	initial-value: "wdth" 90, "wght" 790, "slnt" 0;
}

@property --A-head {
	syntax: "*";
	inherits: true;
	initial-value: "wdth" 90, "wght" 590, "slnt" 0;
}

@property --A-tracking-normal {
	syntax: "*";
	inherits: true;
	initial-value: -0.02em;
}

@property --A-tracking-head {
	syntax: "*";
	inherits: true;
	initial-value: -0.03em;
}

@property --A-leading-head {
	syntax: "<number>";
	inherits: true;
	initial-value:1;
}

@property --B-regular {
	syntax: "*";
	inherits: true;
	initial-value: "wdth" 65, "wght" 410, "slnt" 0;
}

@property --B-regular-light {
	syntax: "*";
	inherits: true;
	initial-value: "wdth" 65, "wght" 390, "slnt" 0;
}

@property --B-head {
	syntax: "*";
	inherits: true;
	initial-value: "wdth" 60, "wght" 765, "slnt" 0, "tnum" 0;
}

@property --B-head-light {
	syntax: "*";
	inherits: true;
	initial-value: "wdth" 60, "wght" 725, "slnt" 0, "tnum" 0;
}

@property --B-leading-normal {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@property --B-leading-head {
	syntax: "<number>";
	inherits: true;
	initial-value: 0.97;
}

@property --B-tracking-normal {
	syntax: "*";
	inherits: true;
	initial-value: 0;
}

@property --B-tracking-head {
	syntax: "*";
	inherits: true;
	initial-value: 0;
}

@layer reset, core;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin:0;
		padding:0;
	}
}

@layer core {
	@font-face {
		font-family: A;
		font-weight: 300 900;
		font-display: swap;
		src: url('NaNMetrifyA-VF.woff2') format('woff2');
	}

	@font-face {
		font-family: B;
		font-weight: 300 900;
		font-display: swap;
		src: url('NaNMetrifyB-VF.woff2') format('woff2');
	}

	html {
		font-size: 21px;
	}

	body {
		--SE-orange:#ff5a36;
		--SE-green: #253e28;
		--SE-creme: #fffbe7;
		--SE-grey: #dbd8d1;
		font-smooth: antialiased;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		--side-pad:0.2rem;
		--top-pad:0.2rem;
	}
	
	svg {
		padding-block-start: calc(10 * var(--top-pad));
		padding-block-end: calc(21 * var(--top-pad));
		padding-inline-start: calc(var(--side-pad) + 0.2rem);
		display:block;
		width:15%;
		height:auto;
	}

	h1 {
		padding-block-start: var(--top-pad);
		padding-inline-start: var(--side-pad);
		font-family: A, sans-serif;
		font-variation-settings: var(--A-head);
		line-height: var(--A-leading-head);
		letter-spacing: var(--A-tracking-head);
		font-size: 3.4rem;
		color: var(--SE-green);
	}
	
	body p {
		padding-inline-start: var(--side-pad);
		max-width:24rem;
		font-family: A, sans-serif;
		font-size:1rem;
		font-variation-settings: var(--A-regular);
		letter-spacing: var(--A-tracking-normal);
	}
	
	#orange {
		font-variation-settings: var(--B-head-light);
		background-color: var(--SE-orange);
		& h2 {
			color: white;
			&::after {
				font-variation-settings:var(--B-regular-light);
			}
		}
	}
	
	#green {
		color: white;
		background-color: var(--SE-green);
		& h2 {
			font-variation-settings: var(--B-head-light);
			color:white;
			&::after {
				font-variation-settings:var(--B-regular-light);
			}
		}
	}
	
	#creme {
		background-color: var(--SE-creme);
		color: var(--SE-green);
		& h2 {
			font-variation-settings: var(--B-head);
			&::after {
				font-variation-settings: var(--B-regular);
			}
		}
	}

	#grey {
		color: var(--SE-green);
		background-color: var(--SE-grey);
		& h2 {
			font-variation-settings: var(--B-head);
			&::after {
				font-variation-settings: var(--B-regular);
			}
		}
	}
	
	hgroup:first-of-type {
		margin-block-start:1.61rem;
	}
	
	hgroup {
		padding-block-end:1.61rem;
		& h2 {
			padding-inline-start: var(--side-pad);
			padding-block-start: var(--top-pad);
			font-family:B, sans-serif;
			line-height: var(--B-leading-head);
			letter-spacing: var(--B-tracking-head);
			font-size: 2.1rem;
			&::after {
				display:block;
				content: attr(data-colour-value);
			}
		}
	}
	
	p {
		margin-block-start: 0.61rem;
	}
	
	table {
		--table-head: white;
		--table-head-background: var(--SE-green);
		--table-active: white;
		--table-active-background: var(--SE-orange);
		--table-1: var(--SE-grey);
		--table-2: var(--SE-grey);
		--table-3: var(--SE-grey);
		--table-4: var(--SE-grey);
		--table-5: var(--SE-grey);
		--table-6: var(--SE-grey);
		--table-7: var(--SE-grey);
		--table-8: var(--SE-grey);
		--table-9: var(--SE-grey);
		--table-10: var(--SE-grey);
		--table-11: var(--SE-grey);
		--table-12: var(--SE-grey);
		--table-13: var(--SE-grey);
		--table-14: var(--SE-grey);
		--table-15: var(--SE-grey);
		margin-block-start: 1.61rem;
		width:100%;
		max-width: 55rem;
		font-family: A, sans-serif;
		font-variation-settings: var(--A-regular);
	}
	
	td {
		width:33.333333%;
		padding-block: 0.1rem;
		padding-inline-start: calc(2* var(--side-pad));
		&:hover {
			color: var(--table-active);
			background-color: var(--table-active-background);
		}
	}
	
	th {
		padding-block: 0.2rem;
		padding-inline-start: calc(2* var(--side-pad));
		text-align: left;
		font-family: A, sans-serif;
		font-variation-settings: var(--A-bold);
		color: var(--table-head);
		background-color: var(--table-head-background);
	}
	
	tr.activated td {
		font-variation-settings: var(--A-semibold);
		color: var(--table-active);
		background-color: var(--table-active-background);
	}

	tr:nth-of-type(0) { background-color: var(--table-1); }
	tr:nth-of-type(1) { background-color: var(--table-2); }
	tr:nth-of-type(2) { background-color: var(--table-2); }
	tr:nth-of-type(3) { background-color: var(--table-3); }
	tr:nth-of-type(4) { background-color: var(--table-4); }
	tr:nth-of-type(5) { background-color: var(--table-5); }
	tr:nth-of-type(6) { background-color: var(--table-6); }
	tr:nth-of-type(7) { background-color: var(--table-7); }
	tr:nth-of-type(8) { background-color: var(--table-8); }
	tr:nth-of-type(9) {
		font-variation-settings:
		var(--A-semibold);
		color: var(--SE-green);
		background-color: var(--SE-creme);
	}
	tr:nth-of-type(9) td:nth-child(2) {
		border:black solid 3px;
	}
	tr:nth-of-type(10) { background-color: var(--table-10); }
	tr:nth-of-type(11) { background-color: var(--table-11); }
	tr:nth-of-type(12) { background-color: var(--table-12); }
	tr:nth-of-type(13) { background-color: var(--table-13); }
	tr:nth-of-type(14) { background-color: var(--table-14); }
	tr:nth-of-type(15) { background-color: var(--table-15); }
}