field-guide-to-salvaging-sound/src/assets/styles/layout.css

* {
	box-sizing: border-box;
}
body,
html {
	margin: 0 0;
	padding: 0 0;
	width: 100%;
	height: 100%;
}

article:not(article article) {
	max-width: var(--article-w);
	margin-right: 150px;
	margin: 0 auto;
	padding-right: var(--footnote-w);
}

article header {
	padding-right: 0;
	margin-right: calc(var(--footnote-w) * -1);
}

article header {
	min-height: 35mm;
}


aside + section p:first-child{
	margin-top: 0;
}

.media--pcb {
	width: 70mm;
}
dialog {
	max-width: var(--main-w);
	height: 100%;
	max-height: 100%;
	border: none;
	overflow: hidden;
	outline: none;
	background-color: transparent;
	margin: 0 auto;
	padding: 0 0;
}

dialog img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-height: calc(100svh - 2rem);
}

dialog::backdrop {
	background-color: transparent;
	transition: 0.2s linear;
}

dialog[open]::backdrop {
	background-color: black;
	opacity: 0.5;
}

sup li:before,
article li:has(.footnote-back):before,
li[count]:before {
	display: inline;
	float: left;
	margin-right: 1ch;
	font-weight: bold;
	content: attr("count");
	content: " [" attr(count) "]";
	color: var(--accent);
}

li[count], aside:not(.footnotes) {
	float: right;
	clear: right;
	width: var(--footnote-w);
	margin-right: calc((var(--footnote-w) * -1));
	padding-left: var(--gap);
	margin-bottom: 1em;
}

li[count] {
	margin-top: -1em;
}

article:not(article article) {
	/*	padding-right: var(--footnote-w);;*/
}

.list--frontpage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
	list-style-type: none;
	padding: 0 0;
}