/* tablets and desktops */

body {
	line-height: 1.4;
}

/* Don't let floating images ruin list bullets in WebKit */
*:not(.menu) > ul,
*:not(.menu) > ol {
	display: grid;
}

/* full-width images in modern/evergreen browsers */
@supports (margin: 0 calc(50% - 50vw)) {
	.full-width {
		margin: 0 calc(50% - 50vw);
		width: 100vw;
	}
}

.float-left,
.float-right {
	padding: 1vmin 1em;
	padding: var(--v-pad) var(--pad);
	width: 16.875em;
	width: max(16.875em, 25vw);
}

/* Pale Moon */
@supports (padding: var(--pad)) and (not (width: max(2em, 2vw))) {
	.float-left,
	.float-right {
		padding: 1vmin 1em;
		width: 16.875em;
	}
}

.float-left {
	float: left;
	margin-left: -1em;
	margin-left: calc(50% - 50vw);
	padding-left: max( var(--pad), calc((25vw - 45em/2 + var(--pad))/2) );
}
.float-right {
	float: right;
	margin-right: -1em;
	margin-right: calc(50% - 50vw);
	padding-right: max( var(--pad), calc((25vw - 45em/2 + var(--pad))/2) );
}

/* widescreen */
@media (min-width: 45em) {
	body {
		line-height: 1.45;
	}

	p {
		-webkit-hyphens: unset;
		hyphens: unset;
	}

	/* Pale Moon */
	@supports (padding: var(--pad)) and (not (width: max(2em, 2vw))) {
		.float-left,
		.float-right {
			width: 25vw;
		}
	}
}