.article {
	h1 {font-size: 1.476rem}
	h2 {font-size: 1.383rem}
	h3 {font-size: 1.296rem}
	h4 {font-size: 1.215rem}
	h5 {font-size: 1.138rem}
	h6 {font-size: 1.067rem}
	
	&-footer {
		hr {
			display: none;
		}
	}
}

.article[has-toc] {
	padding-block-end: 4em;
	> .table-of-contents {display: none;}
	#toc-toggle {
		display: none;
		&:checked ~ .table-of-contents {
			display: block;
			position: fixed;
			z-index: 10;
			inset-block-end: 6em;
			block-size: max-content;
			inline-size: 80%;
			max-inline-size: 20em;
			max-block-size: #{m}in(40em, 70vh);
			overflow-block: scroll;
			inset-inline-end: 1em;
			background: var(--ui-overlay);
			border-radius: 1em;
			@include shadow-low;
			padding-inline: 1em;
			> .container {
				padding: 0;
			}
		}
	}
	label[for="toc-toggle"] {
		position: fixed;
		inset-block-end: 1em;
		inset-inline-end: 1em;
		z-index: 5;
		background: var(--ui-overlay);
		padding: 1em;
		border-radius: 100em;
		inline-size: 6em;
		display: flex;
		justify-content: center;
		@include shadow-low;
	}
	#toc-toggle ~ label[for="toc-toggle"] {

	}
	#toc-toggle:checked ~ label[for="toc-toggle"] {

	}
	#toc-toggle__label-hide {
		display: none;
	}
	#toc-toggle:checked ~ #toc-toggle__label-hide {
		display: flex;
	}
	#toc-toggle:checked ~ #toc-toggle__label-show {
		display: none;
	}
}