body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}

article[autonumbering] {
	h2:before {
		counter-increment: h2;
		content: counter(h2) " ";
	}
	h3:before {
		counter-increment: h3;
		content: counter(h2) "." counter(h3) " ";
	}
	h4:before {
		counter-increment: h4;
		content: counter(h2) "." counter(h3) "." counter(h4) " ";
	}
	h5:before {
		counter-increment: h5;
		content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " ";
	}
	h6:before {
		counter-increment: h6;
		content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " ";
	}
	h2:before,
	h3:before,
	h4:before,
	h5:before,
	h6:before
	{
		font-family: monospace;
		font-size: 1rem;
	}

	#TableOfContents :is(ol, ul) {
		/*
		each list gets a new counter
		*/
		counter-reset: item;
		margin-inline-start: 0;
	}
	#TableOfContents li:before {
		/*
		the counter is added as a pseudo-element,
		and nested counters are joined by a dot
		*/
		content: counters(item, ".") " ";
		counter-increment: item;
		/* ensure the counters align visually */
		font-family: monospace;
		font-weight: bold;
		margin-inline-end: 1em;
	}
	#TableOfContents > ul > li {
		/*
		top-level items wrap after the number,
		in order to add some visual separation
		*/
		display: flex;
		flex-flow: column;
	}
}