web/www/css/core.css

@font-face{
	font-family: "Fork Awesome";
	src: url("/fonts/fork-awesome-subset.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face{
	/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
	font-family: "League Spartan";
	src: url("/fonts/league-spartan-bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face{
	/* Note: Don't use local() as a source, because our version matches Georgia's x-height */
	font-family: "Crimson Pro";
	src: url("/fonts/crimson-pro.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face{
	/* Note: Don't use local() as a source, because our version matches Georgia's x-height */
	font-family: "Crimson Pro";
	src: url("/fonts/crimson-pro-bold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face{
	/* Note: Don't use local() as a source, because our version matches Georgia's x-height */
	font-family: "Crimson Pro";
	src: url("/fonts/crimson-pro-italic.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face{
	/* Note: Don't use local() as a source, because our version matches Georgia's x-height */
	font-family: "Crimson Pro";
	src: url("/fonts/crimson-pro-bold-italic.woff2") format("woff2");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

:root{
	--light-body-bg: #e9e7e0;
	--light-body-text: #222;
	--light-header: #333;
	--light-button: #4f9d85;
	--light-button-highlight: #62bfa3;
	--light-border: #222;
	--light-sub-text: #666;
	--light-table-border: #bbb;
	--light-input-hover: #000;
	--light-input-border: #777;
	--light-input-outline: #000;
	--light-table-row-hover: #dddbd5;
	--light-warning: #932d2d;
	--light-input-icon-shadow: rgba(255, 255, 255, .5);

	--dark-body-bg: #2c3035;
	--dark-body-text: #fff;
	--dark-header: #fff;
	--dark-button: #4f9d85;
	--dark-button-highlight: #62bfa3;
	--dark-border: #000;
	--dark-sub-text: #aaa;
	--dark-input-border: #aaa;
	--dark-input-hover: #118460;
	--dark-input-outline: #fff;
	--dark-table-row-hover: #373b3f;
	--dark-warning: #ec6161;
	--dark-input-icon-shadow: rgba(0, 0, 0, .5);

	--body-text: var(--light-body-text);
	--header: var(--light-header);
	--button: var(--light-button);
	--button-highlight: var(--light-button-highlight);
	--border: var(--light-border);
	--sub-text: var(--light-sub-text);
	--table-border: var(--light-table-border);
	--body-bg: var(--light-body-bg);
	--input-hover: var(--light-input-hover);
	--input-border: var(--light-input-border);
	--input-outline: var(--light-input-outline);
	--link-highlight: var(--button);
	--table-row-hover: var(--light-table-row-hover);
	--warning: var(--light-warning);
	--input-icon-shadow: var(--light-input-icon-shadow);
}

/* Start CSS reset */
/* Dont @import this, to prevent FOUC */
html{
	margin: 0;
	padding: 0;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body{
	margin: 0;
	padding: 0;
}

a{
	outline: 0;
}

blockquote{
	margin: 0;
	quotes: none;
}

p{
	margin: 0;
}

ol{
	margin: 0;
	padding: 0;
}

ul{
	margin: 0;
	padding: 0;
}

h1{
	margin: 0;
}

h2{
	margin: 0;
}

h3{
	margin: 0;
}

h4{
	margin: 0;
}

h5{
	margin: 0;
}

h6{
	margin: 0;
}

figure{
	margin: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

q{
	quotes: none;
}

button::-moz-focus-inner{
	border: 0;
}
/* End reset */

html{
	color: var(--body-text);
	font-family: "Crimson Pro", Georgia, serif;
	-webkit-hyphens: auto;
	hyphens: auto;
	font-size: 22px;
	line-height: 1.4;
	background: var(--body-bg);
}

a,
a:link,
a:visited{
	color: inherit;
}

a:hover{
	color: var(--link-highlight);
}

a:focus{
	outline: 1px dashed var(--input-outline);
}

main{
	width: 100%;
	max-width: 60rem;
	box-sizing: border-box;
	text-align: justify;
	display: flex;
	flex-direction: column;
	font-variant-numeric: oldstyle-nums;
}

main.front-page{
	max-width: none;
	align-items: center;
}

section{
	display: flex;
	flex-direction: column;
}

picture{
	font-size: 0;
}

main.front-page h1 ~ section{
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	width: 50rem; /* for ie11 */
}

main.front-page > p,
main.front-page > picture img{
	width: 40rem;
	max-width: 100%; /* for responsive */
}

main.front-page > picture img{
	margin-top: 2rem;
	margin-bottom: 1rem;
}

main > article{
	display: flex;
	flex-direction: column;
	align-items: center;
}

main > section.narrow > *{
	margin-left: auto;
	margin-right: auto;
}

main > section.narrow > h1,
main > section.narrow > hgroup,
main > section.narrow.has-hero > picture{
	box-sizing: border-box;
	max-width: none;
}

main > section.narrow.has-hero > picture{
	position: relative;
	width: auto;
}

picture[data-caption]:hover::before{
	opacity: 1;
	transition: none;
}

picture[data-caption]::before{
	transition: all .25s;
	opacity: 0;
	position: absolute;
	right: .25rem;
	bottom: .25rem;
	content: attr(data-caption);
	display: block;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	text-shadow: 1px 1px 0 solid #222;
	font-size: .6rem;
	padding: .25rem .5rem;
	font-style: italic;
	border-radius: .25rem;
}

main > section.narrow > *,
main > article > *{
	width: 100%;
	max-width: 40rem;
}

main ol ol{
	list-style-type: lower-latin;
}

main p, main ul, main ol, main li, main blockquote{
	margin-top: 1rem;
}

main p:first-child, main ul:first-child, main ol:first-child, main ul li:first-child, main ol li:first-child, main blockquote:first-child{
	margin-top: 0;
}

blockquote{
	margin: 1rem;
	background: rgba(0, 0, 0, .25);
	padding: 1rem;
	border-radius: .25rem;
	border: 1px solid rgba(255,255,255,.25);
}

ol > li > ul{
	list-style: disc; /* dark discs when nested in ol */
}

ol ol, ol ul, ul ul, ul ol{
	margin-left: 1.2rem;
}

h1,h2,h3,h4,h5,h6{
	color: var(--header);
}

h1,h2,h3,h4,h5,h6,.ebook h1 + p{
	-webkit-hyphens: none;
	hyphens: none;
}

body{
	padding: 0 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;

	/* When the site was first designed, we used the official build of Crimson Pro.
	The font is much smaller than Georgia so we had to make the default body text larger to compensate.
	But this causes a big page layout change once the font is loaded. So later we altered the font to have the same
	x-height of Georgia, but we can't change the root element rem size because the rest of the site would be affected.
	So instead we change the font size here, which doesn't change the root rem size. */
	font-size: .88rem;
	line-height: 1.6;
}

body > header{
	background: #394451;
	display: flex;
	justify-content: space-around;
	border-bottom: 5px solid rgba(0, 0, 0 , .25);
	padding: 1.5rem 0;
	position: relative;
	width: calc(100% + 2rem + 2rem);
	z-index: 100; /* to step on the splash box shadow */
}

body > header > a{
	background: url("/images/logo-full.svg");
	-webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .75));
	/* brightness(0) ensures the images are stark white when inverted, since the originals are usually not #000 */
	filter: brightness(0) invert(100%) drop-shadow(1px 1px 0 rgba(0, 0, 0, .75));
	height: 70px;
	width: 300px;
	background-size: contain;
	background-repeat: no-repeat;
	font-size: 0;
	transition: transform 200ms ease;
}

body > header > a:link,
body > header > a:visited{
	color: #fff; /* Contrast for accessibility */
}

body > header a:focus{
	outline: 1px dashed #fff;
}

body > header > a:hover{
	transform: scale(1.025) rotate(1deg);
}

header nav{
	font-family: "League Spartan";
	text-transform: uppercase;
	align-self: center;
	text-align: right;
	font-size: 0;
}

header nav li{
	color: #fff;
	display: inline-block;
	padding-top: 5px; /* Match the bottom border of the child element so that the navbar is vertically centered */
}

header nav li + li:before{
	content: "•";
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
	position: relative;
	top: -1px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
}

header nav li a{
	text-decoration: none;
	font-size: .75rem;
	transition: border 200ms ease, color 200ms ease;
	letter-spacing: 1px;
	position: relative;
	display: inline-block;
}

header nav li a:link,
header nav li a:visited{
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
	border-bottom: 5px solid rgba(0,0,0,0); /* for the transition */
}

header nav li a:hover,
header nav li a[aria-current]:hover{
	color: #fff;
	border-bottom: 5px solid var(--button);
	transition: none;
}

header nav li a[aria-current]{
	color: #fff;
	border-bottom: 5px solid var(--button);
}

header nav li a[aria-current]::after{
	position: absolute;
	content: "";
	width: 0px;
	height: 0px;
	border-top: 10px solid var(--button);
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid transparent;
	bottom: -20px;
	right: calc(50% - 10px);
}

article > h1{
	width: 100%;
	max-width: 100%;
}

main.front-page h1{
	background: #29292b url("/images/book.jpg") center / cover;
	background-image: image-set("/images/book.avif" type("image/avif"), "/images/book.jpg" type("image/jpeg"));
	border-bottom: 1px solid var(--border);
	box-shadow: 0 0 10px rgba(0, 0, 0, .75);
	width: calc(100% + 4rem);
	margin: 0;
	padding: 6rem;
	box-sizing: border-box;
	-webkit-hyphens: none;
	hyphens: none;
	line-height: 1.2;
	letter-spacing: 1px;
	color: #fff;
	font-size: 2.8rem;
	font-family: "League Spartan";
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, 1);
}

main.front-page > section > section{
	max-width: 100%;
}

main.front-page > section > section > div{
	display: flex;
	margin-top: 2rem;
	max-width: 100%;
}

main.front-page > section > section > div > div{
	max-width: 100%;
}

main.front-page > section > section figure{
	margin-top: 0;
	margin-left: 2rem;
	width: 400px;
	max-width: 100%;
	position: relative;
	align-self: center;
}

main.front-page > section > section figure.stacked{
	height: 229px;
}

main.front-page > section > section figure.stacked img.bottom,
main.front-page > section > section figure.stacked img.top{
	width: 316px;
	position: absolute;
}

main.front-page > section > section figure.stacked img.bottom{
	left: 0;
}

main.front-page > section > section figure.stacked img.top{
	top: 72px;
	left: 72px;
}

main.front-page > section > section figure.stacked img.arrow{
	border: none;
	box-shadow: none;
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 2.5rem;
}

main.front-page > section > section figure.oss{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

main.front-page > section > section figure.oss img{
	border: none;
	box-shadow: none;
	width: 150px;
	display: inline;
	filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, .25));
	margin: 1rem;
}

main.front-page > section > section figure img{
	width: auto;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	border-radius: 5px;
	border: 1px solid var(--border);
	box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
}

main.front-page > section > section p{
	width: 475px;
	max-width: 100%;
	text-align: justify;
}

main.front-page > section > section:first-of-type{
	margin-top: 4rem;
}

main.front-page > section > section + section{
	margin-top: 6rem;
}

main.front-page > img{
	width: 700px;
	max-width: 100%;
	margin: auto;
	margin-top: 4rem;
}

main.front-page > img + p{
	margin-top: 4rem;
}

main.front-page > section{
	max-width: 100%;
}

main.front-page > section > h2{
	font-family: "Crimson Pro", Georgia, serif;
	font-style: italic;
	font-size: 2.2rem;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	max-width: 100%;
	border-top: 3px double var(--sub-text);
	border-bottom: 3px double var(--sub-text);
	padding: 2rem 4rem;
	hyphens: none;
	letter-spacing: 0;
}

main.front-page > section > h2::before{
	margin-bottom: 3rem;
}


main.front-page > section > h2::after{
	margin-top: 3rem;
}

main.front-page > section > section > h3{
	text-align: center;
	font-size: 2rem;
	margin-top: 0;
	hyphens: none;
}

main.center h1{
	margin-top: 4rem;
	border: none;
	padding: 0;
	margin-bottom: 0;
	text-align: center;
}

h1 a{
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6{
	text-align: left;
}

h1 + p{
	margin-top: 0;
}

h1 + section > h2:first-child{
	margin-top: 0rem;
}

.miniheader{
	text-align: center;
	font-size: 1.2rem;
	font-family: "Crimson Pro", Georgia, serif;
	font-style: italic;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 1rem;
	text-transform: none;
	letter-spacing: 0;

}

a.button,
main nav.pagination > a,
form button{
	border: 1px solid rgba(0, 0, 0, .5);
	font-style: normal;
	box-sizing: border-box;
	background-color: var(--button);
	border-radius: 5px;
	padding: 1rem 2rem;
	color: #fff;
	text-decoration: none;
	font-family: "League Spartan", Arial, sans-serif;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
	box-shadow: 2px 2px 0 rgba(0, 0, 0, .5), 1px 1px 0px rgba(255,255,255, .5) inset;
	position: relative;
	text-transform: lowercase;
	cursor: pointer;
	white-space: nowrap;
	font-size: 1rem;
	hyphens: none;
	line-height: 1.2;
}

form button{
	line-height: 1;
	margin-left: 1rem;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus{
	outline: none;
}

input[inputmode="numeric"]{
	text-align: right;
}

h1 + .message{
	margin-top: 0;
}

.message{
	border: 2px solid rgba(0, 0, 0, .25);
	border-radius: .25rem;
	padding: 1rem;
	color: #fff;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, .75);
	box-sizing: border-box;
}

.message.error{
	background: #c45d5d;
}

.message.success{
	background: #5dc47c;
}

.message *:focus{
	outline: 1px dashed #fff;
}

ul.message.error > li{
	margin-left: 1rem;
}

ul.message.error > li:only-child{
	list-style: none;
	margin-left: 0;
}

ul.message.error > li + li{
	margin-top: .5rem;
}

.bulk-downloads > p,
.bulk-downloads h2{
	width: 100%;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

.bulk-downloads h2{
	text-align: center;
}

.download-list{
	margin: auto;
}

.download-list caption{
	font-style: italic;
	text-align: right;
	display: none;
}

.download-list .mid-header{
	font-style: italic;
}

.download-list thead tr.mid-header:first-child > *{
	padding-top: 2rem;
}

.download-list th.row-header,
.download-list .mid-header th:first-child,
.download-list .mid-header th:last-child{
	text-align: left;
}

.download-list td,
.download-list th{
	padding: .25rem .5rem;
	hyphens: none;
	white-space: nowrap;
}

.download-list th{
	font-weight: normal;
	text-align: right;
}

.download-list .number{
	text-align: right;
}

.download-list td.download{
	padding-right: 0;
	color: var(--body-text);
}

.download-list td.download + td{
	padding-left: .25rem;
	font-size: .75em;
	color: var(--sub-text);
}

.download-list tbody .row-header{
	font-weight: bold;
	text-align: left;
	white-space: normal;
}

.download-list tbody tr td,
.download-list tbody tr th{
	border-top: 1px dashed var(--table-border);
}

.download-list tbody tr:first-child > *,
.download-list tbody tr.year-header > *,
.download-list tbody tr.year-header + tr > *,
.download-list tbody tr.mid-header tr > *,
.download-list tbody tr.mid-header + tr td,
.download-list tbody tr.mid-header + tr th{
	border: none;
}

.download-list tbody tr:not([class]):hover > *{
	background: var(--table-row-hover);
}

.download-list tbody tr:only-child:not([class]):hover > *{
	background: unset; /* Don't highlight on hover if there's only one row */
}

h2 + .download-list tr.year-header:first-child th{
	padding-top: 2rem;
}

.download-list .year-header th{
	padding-top: 4rem;
	font-size: 1.4rem;
	font-family: "League Spartan", Arial, sans-serif;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--header);
	text-align: center;
}

main nav.pagination li.highlighted a:focus,
a.button:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="file"]:focus,
label:has(input[type="radio"]):focus-within,
label:has(input[type="checkbox"]):focus-within,
select:focus,
button:focus,
nav a[rel]:focus,
textarea:focus{
	outline: 1px dashed var(--input-outline);
}

select:-moz-focusring,
select::-moz-focus-inner{
	color: transparent !important;
	text-shadow: 0 0 0 var(--body-text) !important;
}

a.button:active,
main nav.pagination > a[href]:active,
form button:active{
	top: 2px;
	left: 2px;
	box-shadow: none;
}

a.button.next::after,
main nav.pagination > a:last-child::after{
	font-family: "Fork Awesome";
	content: "\f061";
	transition: all 200ms ease;
	position: relative;
	left: 0;
	margin-left: .5rem;
}

a[href].button.next:hover::after,
main nav.pagination > a:last-child[href]:hover::after{
	left: .25rem;
	position: relative;
	transition: all 200ms ease;
}

main nav.pagination > a:first-child:before{
	font-family: "Fork Awesome";
	content: "\f060";
	transition: all 200ms ease;
	position: relative;
	right: 0;
	margin-right: .5rem;
}

main nav.pagination > a:first-child[href]:hover::before{
	right: .25rem;
	position: relative;
	transition: all 200ms ease;
}

a.button.next:hover::after,
main nav.pagination > a:last-child[href]:hover::after{
	left: .25rem;
	position: relative;
	transition: all 200ms ease;
}

article nav ol li a:hover,
main nav.pagination ol li a:hover,
main nav.pagination ol li.highlighted a:hover,
a.button:hover,
main nav.pagination > a:hover,
form button:hover{
	background-color: var(--button-highlight);
}

main nav.pagination > a:not([href]){
	cursor: default;
	color: #efefef;
	box-shadow: none;
	background: #bbb url("/images/stripes-dark.svg");
}

main.front-page > a.button{
	align-self: center;
	margin-top: 4rem;
	white-space: normal;
	height: auto;
	text-align: center;
}

article.ebook ul,
article.ebook ol{
	list-style: none;
	margin-left: 0;
}

article.ebook #history li{
	display: table-row;
}

article.ebook #history li time,
article.ebook #history li p{
	display: table-cell;
	width: auto;
}

article.ebook #history li + li > *{
	padding-top: 1rem;
}

article.ebook #history li time{
	padding-right: 1rem;
	white-space: nowrap;
	text-align: right;
}

article.ebook section aside p::before{
	content: "(";
}
article.ebook section aside p::after{
	content: ")";
}

article.ebook section aside{
	margin-top: 1rem;
	color: var(--sub-text);
	text-align: right;
	font-style: italic;
	font-size: .9rem;
}

article.ebook > aside{
	width: 100%;
	max-width: 100%;
}

article.ebook > header{
	width: 100%;
	max-width: 100%;
	margin: auto;
	position: relative;
	overflow: hidden;
	min-height: 20rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-top: none;
	border-bottom-right-radius: .25rem;
	border-bottom-left-radius: .25rem;
	box-sizing: border-box;
}

article.ebook > header > hgroup{
	position: relative;
	z-index: 1;
	max-width: 75%;
	box-sizing: border-box;
	background: rgba(0, 0, 0, .75);
	padding: 2rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 2rem; /* for responsive */
	border-radius: .25rem;
}

article.ebook > header > hgroup > *{
	color: #fff;
}

article.ebook > header > hgroup > h2{
	font-size: 1.4rem;
	font-family: "League Spartan", Arial, sans-serif;
	line-height: 1;
	margin-top: 1rem;
	margin-left: 0;
}

article.ebook > header > hgroup a,
article.ebook > header > hgroup a:link,
article.ebook > header > hgroup a:visited{
	color: inherit;
	text-decoration: none;
}

article.ebook > header img{
	top: 0;
	left: 0;
	position: absolute;
	z-index: 0;
	height: 100%;
	width: auto;
	object-fit: cover;
	max-width: 100%;
}

article.ebook section#details ul,
article.ebook section#sources ul{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
}

article.ebook section#details ul li,
article.ebook section#sources ul li{
	margin: 0;
}

article.ebook section#download ul{
	margin-top: 0;
}

article.ebook section#download li{
	display: table-row;
}

article.ebook section#download li p > span{
	display: table-cell;
	vertical-align: top;
	padding-top: 2rem;
}

article.ebook section#download li:first-child span{
	padding-top: 1rem;
}

article.ebook section#download li span:first-child{
	white-space: nowrap;
}

article.ebook section#download li span:nth-child(2){
	padding-right: .5rem;
	padding-left: .5rem;
}

article.ebook section ul li a[class]{
	display: inline-flex;
	text-align: left;
	align-items: center;
}

article.ebook section#details ul li a[class],
article.ebook section#sources ul li a[class]{
	display: inline-flex;
	align-items: flex-start;
}

article.ebook section#read-online a::before,
article.ebook section#download ul li a[class]::before,
article.ebook section#details ul li a[class]::before,
article.ebook section#sources ul li a[class]::before{
	display: inline-block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	content: "";
	margin-right: .5rem;
	height: 1.5rem;
	width: 1.5rem;
	min-width: 1.5rem;
	transition: transform .2s ease;
}

article.ebook section#read-online a:hover::before,
article.ebook section#download ul li a[class]:hover::before,
article.ebook section#details ul li a[class]:hover::before,
article.ebook section#sources ul li a[class]:hover::before{
	transform: scale(1.1);
}

article.ebook #more-ebooks{
	border-top: 3px double var(--sub-text);
	margin-top: 4rem;
}


article.ebook #more-ebooks h2{
	text-align: center;
	font-style: normal;
	color: var(--body-text);
	margin: 0;
	margin-top: 2rem;
}

article.ebook #more-ebooks ul{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin-top: 2rem;
	margin-left: -1rem;
}

article.ebook #more-ebooks ul li{
	margin: 0;
	font-size: 0;
	margin-left: 1rem;
}

article.ebook #more-ebooks img{
	height: 200px;
	border-radius: .25rem;
	border: 1px solid var(--border);
	transition: transform .2s ease;
	box-sizing: border-box;
	width: auto;
}

article.ebook #more-ebooks img:hover{
	transform: scale(1.05);
	box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
}

article.ebook #more-ebooks a:active img{
	transform: scale(1.025);
	transition: none;
	box-shadow: none;
}

article.ebook #more-ebooks li:nth-child(1) img,
article.ebook #more-ebooks li:nth-child(5) img{
	height: 160px;
}

article.ebook #more-ebooks li:nth-child(2) img,
article.ebook #more-ebooks li:nth-child(4) img{
	height: 180px;
}

time{
	color: var(--sub-text);
	margin-right: 15px;
	width: 6em;
	display: inline-block;
}

.globe::before{
	background-image: url("/images/globe.svg");
}

.project-gutenberg::before{
	background-image: url("/images/project-gutenberg.svg");
}

.wikisource::before{
	background-image: url("/images/wikisource.svg");
}

.hathitrust::before{
	background-image: url("/images/hathitrust.svg");
}

.wikipedia::before{
	background-image: url("/images/wikipedia.svg");
}

.internet-archive::before{
	background-image: url("/images/internet-archive.svg");
}

.github::before{
	background-image: url("/images/github.svg");
}

.epub::before{
	background-image: url("/images/epub.svg");
}

.amazon::before{
	background-image: url("/images/amazon.svg");
}

.kobo::before{
	background-image: url("/images/kobo.svg");
}

.google::before{
	background-image: url("/images/google.svg");
}

.distributed-proofreaders::before{
	background-image: url("/images/distributed-proofreaders.svg");
}

.list::before{
	background-image: url("/images/list.svg");
}

.page::before{
	background-image: url("/images/page.svg");
}

article.ebook h1{
	overflow-wrap: anywhere;
	border: none;
	margin: 0;
	padding: 0;
}

article.ebook hgroup h2{
	overflow-wrap: anywhere;
	text-align: center;
}

aside#reading-ease,
section#description{
	margin-top: 2rem;
}

section#description h2{
	display: none;
}

section#description > p:first-of-type{
	margin-top: 0;
}

article.ebook aside#reading-ease{
	border-top: 3px double var(--sub-text);
	border-bottom: 3px double var(--sub-text);
	padding: 1rem 0;
	font-style: italic;
	text-align: center;
}

h2,
.masthead h3{
	font-size: 1.4rem;
	font-family: "League Spartan", Arial, sans-serif;
	margin-top: 4rem;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
}

h3{
	font-size: 1rem;
	font-family: "League Spartan", Arial, sans-serif;
	margin-top: 3rem;
	line-height: 1.2;
}

h4,
h5,
h6{
	font-size: 1rem;
	font-family: "League Spartan", Arial, sans-serif;
	margin-top: 3rem;
	line-height: 1.2;
}

body > footer{
	width: 100%;
	max-width: 60rem;
	border-top: 3px double var(--sub-text);
	margin-top: 2rem;
	text-align: center;
	padding: 2rem 0;
}

footer > p:last-child a{
	font-size: 0;
	display: inline-block;
	margin: auto;
	margin-top: 2rem;
}

footer > p:last-child a::before{
	content: "";
	background: url("/images/logo-small.svg");
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	height: 2.5rem;
	width: calc(4rem - 1px);
	margin: auto;
}

footer ul.nav-links{
	font-size: 0;
	margin-bottom: 1rem;
}

footer ul.nav-links li{
	display: inline-block;
	list-style: none;
	text-transform: lowercase;
	font-size: 0;
}

footer ul.nav-links li a,
footer ul.nav-links li::after{
	font-size: .9rem;
	white-space: nowrap;
}

footer ul.nav-links li:not(:last-child)::after{
	content: "\b7";
	margin: 0 10px;
}

footer > p:first-child{
	line-height: 1;
	white-space: normal;
	hyphens: none;
	margin: 0 1rem 1rem 1rem;
	text-transform: lowercase;
}

footer ul.nav-links ~ p{
	font-size: .6rem;
}

footer > a{
	display: block;
	margin-top: 2rem;
	font-size: 0;
}

footer > p:first-child{
	font-size: .9rem;
}

footer > p:first-child::before{
	font-family: "Fork Awesome";
	content: "\f0e0";
	display: inline;
	margin-right: .25rem;
	font-size: .75rem;
}

footer ul.social-media{
	display: flex;
	gap: 1rem;
	list-style: none;
	justify-content: center;
	margin-bottom: 1rem;
}

footer ul.social-media a{
	font-size: 0;
	display: block;
	height: 1.5rem;
	width: 1.5rem;
}

footer ul.social-media a::before{
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	background-size: cover;
	filter: brightness(0) saturate(100%) invert(18%) sepia(33%) saturate(355%) hue-rotate(172deg) brightness(93%) contrast(89%); /* Change color of SVG to #303944 */
}

footer ul.social-media a[href^="https://x.com"]::before{
	background-image: url("/images/x.svg");
}

footer ul.social-media a[href^="https://www.facebook.com"]::before{
	background-image: url("/images/facebook.svg");
}

footer ul.social-media a[href^="https://www.instagram.com"]::before{
	background-image: url("/images/instagram.svg");
}

footer ul.social-media a[href^="https://bsky.app"]::before{
	background-image: url("/images/bluesky.svg");
}

footer ul.social-media a[href^="https://mastodon.social"]::before{
	background-image: url("/images/mastodon.svg");
}

footer ul.social-media a:hover::before{
	/* This filter changes a black background to #62bfa3, which is var(--button-highlight) */
	filter: invert(69%) sepia(35%) saturate(459%) hue-rotate(111deg) brightness(92%) contrast(87%);
}

/* ebook list */
h1,
.masthead h2{
	font-size: 2rem;
	font-family: "League Spartan", Arial, sans-serif;
	line-height: 1.2;
	border-bottom: 3px double var(--sub-text);
	margin-top: 2rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	text-align: center;
}

main.ebooks > aside.alert + ol{
	margin-top: 2rem;
}

.opds ol.ebooks-list.list{
	margin-top: 4rem;
}

.opds .download{
	font-weight: bold;
	margin-top: 1rem;
}

.opds .download + ul,
.opds .download + ul > li{
	margin-top: 0;
}

ol.ebooks-list.grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: 4rem;
	margin: 0;
	margin-bottom: 4rem;
	list-style: none;
}

ol.ebooks-list.list{
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: auto;
	margin-bottom: 4rem;
	width: 100%;
	max-width: 30rem;
}

ol.ebooks-list > li{
	margin: 0;
	text-align: center;
}

ol.ebooks-list.list > li{
	display: grid;
	grid-template-columns: 6rem 1fr;
	grid-column-gap: 1rem;
	grid-template-rows: auto auto 1fr;
}

ol.ebooks-list.list > li + li {
	margin-top: 2rem;
}

ol.ebooks-list.list > li .thumbnail-container{
	grid-row: 1 / span 3;
}

ol.ebooks-list.list.rss > li .thumbnail-container{
	grid-row: 1 / span 5;
}

.opds ol.ebooks-list.list > li .thumbnail-container{
	grid-row: 1 / span 6;
}

ol.ebooks-list.list ul.tags{
	display: flex;
	justify-content: flex-start;
	margin-left: -.25rem;
	margin-top: .25rem;
}

ol.ebooks-list.list ul.tags li{
	margin-left: .25rem;
	margin-top: .25rem;
}

ol.ebooks-list.list > li p{
	text-align: left;
}

ol.ebooks-list a[tabindex]{
	display: inline-block;
	transition: all .2s ease;
	position: relative;
	font-size: 0;
}

ol.ebooks-list a[tabindex][data-ordinal]::before{
	display: block;
	content: "№ "attr(data-ordinal);
	position: absolute;
	background: rgba(0, 0, 0, .75);
	padding: .5rem;
	border-radius: .25rem;
	line-height: 1;
	font-variant-numeric: normal;
	left: calc(.25rem + 3px); /* align with title box in picture */
	top: calc(.25rem + 3px);
	font-size: .75rem;
	font-weight: bold;
	font-family: "League Spartan", Arial, sans-serif;
	color: var(--dark-body-text);
}

ol.ebooks-list > li p{
	margin: 0;
	text-align: center;
	-webkit-hyphens: none;
	hyphens: none;
}

ol.ebooks-list > li img,
img.ebook{
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: .25rem;
}

ol.ebooks-list > li > p:nth-of-type(1) > a{
	font-weight: bold;
	text-decoration: none;
	display: flex;
	justify-content: center;
}

ol.ebooks-list.list > li p.author a,
ol.ebooks-list.list > li > p:nth-of-type(1) > a{
	display: inline;
}

ol.ebooks-list > li .thumbnail-container > a:first-child{
	font-size: 0; /* for correct focus outline */
}

ol.ebooks-list > li p.author{
	font-style: italic;
}

ol.ebooks-list > li p.author a{
	text-decoration: none;
	display: flex;
	justify-content: center;
}

article nav ol,
main nav.pagination ol{
	list-style: none;
	display: flex;
	margin: 0 .5rem;
}

aside.warning,
aside.alert{
	font-style: italic;
	margin-top: 2rem;
	background: url("/images/stripes.svg") #FFFF99;
	color: var(--light-body-text);
	border-radius: .25rem;
	padding: 2rem;
	border: 2px solid #FFCC00;
	box-sizing: border-box;
}

aside.warning{
	font-style: normal;
	hyphens: none;
}

aside.warning a:hover,
aside.alert a:hover{
	color: var(--light-highlight);
}

aside.warning a:focus
aside.alert a:focus{
	outline: 1px dashed var(--light-highlight);
}

nav + aside.alert{
	margin-top: 2rem;
}

aside.alert + p{
	margin-top: 2rem;
}

h1 + aside.alert{
	margin-top: 0;
}

section#history ol > li:before{
	display: none;
}

figure img{
	width: 50%;
}

figure{
	margin-top: 1rem;
}

ul.tags{
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

.opds ul.tags{
	justify-content: flex-start;
	margin: .5rem auto;
}

ul.tags li{
	margin: 0;
}

ul.tags li a,
.opds ul.tags li p{
	border: 1px solid var(--body-text);
	border-radius: 5px;
	padding: .25rem .5rem;
	font-style: normal;
	background: rgba(0, 0, 0, .1);
	text-decoration: none;
	display: block;
	line-height: 1;
	white-space: nowrap;
	text-transform: lowercase;
	box-shadow: 1px 1px 0px rgba(255, 255, 255, .5) inset;
}

ul.tags li a:hover{
	color: #fff;
	background: var(--button-highlight);
}

figure img{
	border-radius: .25rem;
	border: 1px solid var(--border);
	display: block;
	margin: auto;
}

figure p{
	margin: 0;
}

figure p + p{
	margin-top: 15px;
}

main nav.pagination{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: none;
}

article nav ol li,
main nav.pagination ol li{
	margin: 0;
	white-space: nowrap;
}

article nav ol li a,
main nav.pagination ol li a{
	font-size: 1rem;
	line-height: 1.4;
	padding: 1rem;
	margin: 0 .5rem;
	border-radius: .25rem;
	font-variant-numeric: normal;
	height: calc(1.4rem + 2rem + 2px);
	display: inline-block;
	box-sizing: border-box;
}

article nav ol li.highlighted a,
main nav.pagination ol li.highlighted a{
	background: var(--button);
	border: 1px solid rgba(0, 0, 0, .5);
}

article nav ol li.highlighted a,
main nav.pagination ol li.highlighted a,
article nav ol li a:hover,
main nav.pagination ol li a:hover{
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}

.message a:hover{
	color: #fff;
}

p.no-results{
	margin-top: 4rem;
	margin-bottom: 2rem;
	font-style: italic;
	text-align: center;
}

.s-pd-warning{
	font-style: italic;
	margin-top: 1rem;
}

/* remove some styles from Chromium / Webkit */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{
	-webkit-appearance: none;
}

input::placeholder{
	font-style: italic;
	color: rgba(0, 0, 0, .75);
}

label.automation-test{
	display: none;
}

label:has(input[type="email"]),
label:has(input[type="search"]){
	display: block;
}

select,
textarea,
input[type="text"],
input[type="month"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="file"]{
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	background: rgba(0, 0, 0, .05);
	border-radius: 5px;
	border: 1px solid var(--input-border);
	display: flex;
	align-items: center;
	padding: 1rem;
	font-size: .88rem;
	font-family: "Crimson Pro";
	color: var(--body-text);
	line-height: 1.4;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
}

label:has(input[type="email"]) input,
label:has(input[type="search"]) input,
label:has(input[type="url"]) input,
label.captcha input,
label.year input,
label.tags input,
label.picture input,
label.user input,
label:has(input[type="password"]) input{
	padding-left: 2.5rem;
}

select{
	font-family: "Fork Awesome", "Crimson Pro";
	padding-left: 1rem;
	padding-right: 2rem;
	display: block;
}

label:not(:has(input[type="checkbox"])){
	font-weight: bold;
}

label span{
	display: block;
}

label span + span{
	font-style: italic;
	font-weight: normal;
}

label span + span code{
	font-style: normal;
}

label span + span i{
	font-style: normal;
}

input[type="file"],
label:has(input[type="file"]),
label:has(input[type="radio"]),
label:has(input[type="checkbox"]){
	cursor: pointer;
}

label + label:has(input[type="radio"]),
label + label:has(input[type="checkbox"]){
	margin-top: 1px; /* So we can see the top outline on focus */
}

label:has(input[type="radio"]):has(> span),
label:has(input[type="checkbox"]):has(> span){
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
}

label:has(input[type="radio"]):has(> span) input,
label:has(input[type="checkbox"]):has(> span) input{
	grid-row: 1 / span 2;
	justify-self: center;
	align-self: start;
	margin-top: 10px;
	margin-right: .5rem;
}

select[multiple]{
	padding: 1rem;
}

label:has(select) > span{
	display: block;
}

label:has(select) > span + span{
	display: inline-block;
}

label:has(select) > span + span::after{
	display: block;
	font-style: normal;
	position: absolute;
	top: calc((2rem + 1.4rem + 2px) / 2 - 10px);
	right: calc(1rem - 12px / 2);
	content: "\f107";
	font-family: "Fork Awesome";
	font-size: 1rem;
	line-height: 1;
	color: var(--sub-text);
	margin-top: -3px; /* Adjust for Crimson Pro line-height */
	text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
	transition: color .5s;
	z-index: -1;
}

label:has(input[type="search"]):focus-within::before,
label:has(input[type="search"]):hover::before,
label:has(select):hover > span + span::after{
	color: var(--input-outline);
	transition: none;
}

label:has(select) > span + span,
label:has(input[type="email"]),
label:has(input[type="search"]),
label:has(input[type="url"]),
label.captcha,
label.year,
label.tags,
label.picture,
label.user,
label:has(input[type="password"]){
	display: block;
	position: relative;
	max-width: 100%;
}

label:has(input[type="email"])::before,
label:has(input[type="search"])::before,
label.captcha::before,
label.year::before,
label.tags::before,
label.picture::before,
label.user::before,
label:has(input[type="url"])::before,
label:has(input[type="password"])::before{
	display: block;
	position: absolute;
	bottom: 1.2rem;
	left: 1rem;
	font-family: "Fork Awesome";
	font-size: 1rem;
	line-height: 1;
	color: var(--sub-text);
	margin-top: -3px; /* Adjust for Crimson Pro line-height */
	text-shadow: 1px 1px 0 var(--input-icon-shadow);
	width: 1rem;
	transition: color .5s;
	cursor: text;
}

label:has(input[type="url"])::before{
	content: "\f0c1";
}

label:has(input[type="search"])::before{
	content: "\f002";
}

label:has(input[type="email"])::before{
	content: "\f0e0";
}

label:has(input[type="password"])::before{
	content: "\f084";
}

label.captcha::before{
	content: "\f256";
}

label.year::before{
	content: "\f073";
}

label.tags:not(:has(select))::before{
	content: "\f02c";
}

label.picture::before{
	content: "\f03e";
}

label.user::before{
	content: "\f007";
}

nav li.highlighted a,
nav a[rel],
a.button,
button,
input[type="text"],
input[type="month"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="search"],
select{
	transition: border-color .5s, background-color .5s;
}

a.button:hover,
nav li.highlighted a:hover,
nav a[rel]:hover,
button:hover{
	transition: none;
}

input[type="text"]:focus,
input[type="text"]:hover,
input[type="month"]:focus,
input[type="month"]:hover,
input[type="number"]:focus,
input[type="number"]:hover,
input[type="url"]:focus,
input[type="url"]:hover,
input[type="email"]:focus,
input[type="email"]:hover,
input[type="password"]:focus,
input[type="password"]:hover,
input[type="search"]:focus,
input[type="search"]:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover{
	border-color: var(--input-outline);
	background: rgba(0, 0, 0, .1);
	transition: none;
}

input[type="text"]:user-invalid,
input[type="month"]:user-invalid,
input[type="number"]:user-invalid,
input[type="url"]:user-invalid,
input[type="email"]:user-invalid,
input[type="password"]:user-invalid,
input[type="search"]:user-invalid,
input[type="file"]:user-invalid{
	border-color: #ff0000;
	box-shadow: 1px 1px 0 #ff0000, -1px -1px 0 #ff0000;
}

select[multiple] option:checked{
	/* We have to use this method to set the bg color because browsers override background-color with !important */
	background-image: linear-gradient(0deg, var(--button) 0%,  var(--button) 100%);
}

form[action="/settings"]{
	margin: 0 1rem;
}

form[action="/ebooks"] label{
	max-width: 100%;
}

form[action="/ebooks"] select[multiple] option[value="all"]{
	border-bottom: 1px dashed var(--sub-text);
}

form[action="/ebooks"]{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 10rem auto auto auto 1fr;
	margin: 0 1rem;
	margin-bottom: 4rem;
	max-width: calc(100% - 2rem);
}

form[action="/ebooks"] label.tags{
	grid-column: 1;
	grid-row: 1 / span 2;
	white-space: nowrap;
}

form[action="/ebooks"] label.tags select{
	width: 100%;
	height: calc(100% - 1.4rem);
}

form[action="/ebooks"] label:has(input[type="search"]){
	grid-column: 2 / span 4;
}

form[action="/ebooks"] label.sort{
	grid-column: 2;
}

form[action="/ebooks"] label.sort select{
	max-width: 100%;
}

form[action="/ebooks"] label.view{
	grid-column: 3;
}

form[action="/ebooks"] label.per-page{
	grid-column: 4;
}

form[action="/ebooks"] button{
	justify-self: end;
	margin-top: 1.4rem;
}

form.single-row{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

form.single-row label{
	width: 100%;
}

form.single-row button{
	align-self: flex-end;
	margin-top: 1rem;
}

article nav ol li:not(:first-child):not(:last-child):not(.highlighted),
main nav.pagination ol li:not(:first-child):not(:last-child):not(.highlighted){
	display: none;
}

article nav ol li.highlighted::before,
main nav.pagination ol li.highlighted::before{
	content: "⋯";
	padding-right: 1rem;
}

article nav ol li.highlighted::after,
main nav.pagination ol li.highlighted::after{
	content: "⋯";
	padding-left: 1rem;
}

article nav ol li.highlighted:first-child::before,
article nav ol li.highlighted:last-child::after,
article nav ol li.highlighted:nth-child(2)::before,
article nav ol li.highlighted:nth-last-child(2)::after,
main nav.pagination ol li.highlighted:first-child::before,
main nav.pagination ol li.highlighted:last-child::after,
main nav.pagination ol li.highlighted:nth-child(2)::before,
main nav.pagination ol li.highlighted:nth-last-child(2)::after{
	display: none;
}

.has-hero hgroup{
	padding: 2rem 0 1.75rem 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	max-width: none;
}

.has-hero picture{
	max-width: none;
	text-align: center;
	margin-bottom: 2rem;
}

.has-hero picture + p{
	margin-top: 0;
}

h1 + ul.message,
.has-hero picture + ul.message{
	margin-top: 0;
	margin-bottom: 1rem;
}

.has-hero img{
	border: 1px solid var(--border);
	border-radius: .25rem;
	max-width: 100%;
}

.has-hero hgroup h1,
.has-hero > h1,
.has-hero hgroup h2,
.has-hero > h2{
	border: none;
	padding: 0;
	margin: 0;
}

.has-hero hgroup h1,
.has-hero > h1{
	margin-bottom: 1rem;
	letter-spacing: 1px;
}

.has-hero > h1{
	padding: 2rem;
	margin: 0;
}

.has-hero hgroup h2,
.has-hero > h2{
	font-family: "Crimson Pro", serif;
	font-style: italic;
	font-weight: normal;
	font-size: 1.75rem;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
}

.button-row{
	display: grid;
	margin: 2rem 0;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
	justify-items: center;
}

.button-row.center{
	grid-template-columns: 1fr;
}

.button-row.narrow{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.button-row:last-child{
	margin-bottom: 0;
}

.masthead h2 + section > h3{
	margin-top: 0;
}

.masthead h2{
	text-transform: none;
	margin-top: 4rem;
}

.masthead ol{
	list-style: none;
	display: grid;
	grid-gap: 1rem;
}

.masthead ol.editors{
	grid-template-columns: repeat(auto-fill, minmax(max-content, 15rem));
}

.masthead ol.editors p{
	line-height: 1;
}

.masthead ol.donors.patrons{
	font-style: italic;
	display: block;
	columns: 3;
	margin-left: -.25rem;
}

.masthead ol.donors.patrons li{
	padding: .25rem;
}

.masthead ol.donors.patrons li:last-child{
	font-variant-numeric: normal;
}

.masthead ol.corporate img{
	max-height: 100px;
	max-width: 100%;
	margin-right: 0;
	box-sizing: content-box;
}

.masthead ol.corporate a:focus{
	outline: none;
}

.masthead ol.corporate a:focus p{
	outline: 1px dashed var(--input-outline);
}

.masthead ol.donors.corporate{
	display: flex;
	justify-content: center;
}

.masthead ol.donors.corporate li + li{
	margin-left: 2rem;
}

.masthead ol.donors.corporate p{
	text-align: center;
	margin-top: .5rem;
}

.masthead ol.donors.corporate a{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.masthead ol.donors.corporate img.no-border{
	border: none;
}

.masthead ol li{
	margin: 0;
}

.masthead ol.editors li{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.masthead img{
	border: 1px solid var(--border);
	border-radius: .25rem;
	margin-right: .5rem;
	box-sizing: border-box;
}

.masthead img[src*="portrait.svg"]{
	padding: .5rem;
}

.masthead ol li img.contact{
	border: none;
	border-radius: 0;
	width: auto;
	margin-top: .5rem;
	margin-right: 0;
	display: block;
	height: auto;
}

.masthead ol.editors img{
	height: 102px;
	width: 102px;
}

.masthead ol li p{
	margin-top: 0;
	text-align: left;
	display: inline-block; /* Prevent a `<p>` from breaking across column division */
}

.masthead hgroup * + *{
	font-family: "Crimson Text", serif;
	font-size: .88rem;
	margin-top: 1rem;
	font-style: italic;
	font-weight: normal;
}

.donate aside{
	margin-top: 1rem;
	padding-top: 1rem;
	font-style: italic;
}

.donate aside:first-child{
	margin-top: 0;
}

.donate table{
	margin: 1rem auto 0 auto;
}

.donate table td{
	padding: 1rem;
}

.donate table td:first-child{
	padding-left: 0;
	vertical-align: middle;
}

.donate table p{
	margin: 0;
	text-align: right;
}

.donate a.button{
	display: block;
	height: auto;
	text-align: center;
}

.donation,
article.ebook section .donation{
	position: relative;
	border: 1px dashed var(--body-text);
	color: var(--body-text);
	text-align: center;
	padding: 2rem;
	font-size: .88rem;
	margin-top: 0;
	border-radius: .25rem;
	margin-bottom: 2rem;
	background-color: rgba(255, 255, 255, .5);
	font-style: italic;
	hyphens: none;
	box-sizing: border-box;
}

.donation::before{
	content: "";
	display: block;
	position: absolute;
	height: calc(1rem + 2px);
	width: calc(1rem + 2px);
	top: 0;
	left: 0;
	-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
	transform: rotate(90deg);
	border-radius: 0 0 0 .25rem;
	background: rgba(0, 0, 0, .4);
}

.donation::after{
	content: "";
	display: block;
	position: absolute;
	height: 1rem;
	width: 1rem;
	top: 0;
	left: 0;
	-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
	transform: rotate(90deg);
	border-radius: 0 0 0 .25rem;
	background: #dda82a;
}

.donation.closable::before,
.donation.closable::after{
	display: none;
}

article.ebook section .donation p::before,
article.ebook section .donation p::after{
	display: none;
}

article.ebook h2 + section > h3:first-of-type{
	margin-top: 1rem;
}

.acroynm{
	font-variant: all-small-caps;
}

.anti-spam{
	position: absolute;
	left: -5000px;
}

.message + form,
p + form{
	margin-top: 1rem;
}

form[action*="/polls/"],
form[action="/newsletter/subscriptions"]{
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 0;
}

form[action*="/polls/"] label:has(input[type="email"]),
form[action="/newsletter/subscriptions"] label:has(input[type="email"]),
form[action="/newsletter/subscriptions"] label.captcha{
	grid-column: 1 / span 2;
}

form[action="/newsletter/subscriptions"] label.captcha div{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr 1fr;
}

form[action="/newsletter/subscriptions"] label.captcha div input{
	align-self: center;
}

form fieldset ul{
	list-style: none;
}

form[action*="/polls/"] button,
form[action="/newsletter/subscriptions"] button{
	grid-column: 2;
	justify-self: end;
	margin-left: 0;
}

form[action*="/polls/"] fieldset,
form[action="/newsletter/subscriptions"] fieldset{
	grid-column: 1 / span 2;
}

fieldset{
	padding: 0;
	border: none;
}

fieldset p,
fieldset legend{
	border-bottom: 1px dashed var(--input-border);
}

fieldset legend,
fieldset p:has(+ ul){
	font-weight: bold;
}

input[type="checkbox"] + span:has(+ span){
	font-weight: bold;
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]){
	display: inline-flex;
	align-items: flex-start;
	text-align: left;
	line-height: 1;
	cursor: pointer;
}

label:has(input[type="radio"]) input,
label:has(input[type="checkbox"]) input{
	margin-right: .25rem;
}

label:has(input[type="radio"]) span,
label:has(input[type="checkbox"]) span{
	display: block;
}

label:has(input[type="radio"]) span > span,
label:has(input[type="checkbox"]) span > span{
	line-height: 1.6;
	margin-top: .25rem;
}

label:has(input[type="radio"]) span,
label:has(input[type="checkbox"]) span{
	font-weight: normal;
}

article.step-by-step-guide ol ol{
	margin-left: 1.2rem;
	list-style: decimal;
}

.step-by-step-guide ol ol li p{
	margin-left: 0;
}

.full-width img{
	width: 100%;
}

h1.is-collection{
	margin-bottom: 1rem;
}

.ebooks-toolbar{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 4rem;
	border-bottom: 1px dashed var(--sub-text);
	padding-bottom: 1rem;
	font-style: italic;
	gap: 1rem;
}

.ebooks-toolbar a{
	padding: .5rem 1rem;
	padding-left: .75rem;
	text-decoration: none;
}

.ebooks-toolbar a.button{
	/*font-family: "Crimson Pro", Georgia, serif;*/
	font-size: .75rem;
	display: inline-flex;
	gap: .75rem;
	align-items: center;
	font-weight: bold;
}

.ebooks-toolbar a.button::before{
	font-family: "Fork Awesome";
	display: inline-block;
	font-size: 1rem;
}

.ebooks-toolbar a.button[href*="/downloads"]::before{
	content: "\f019";
}

.ebooks-toolbar a.button[href*="/feeds"]::before{
	content: "\f143";
}

abbr.acronym{
	font-variant: all-small-caps;
}

aside header{
	font-family: "League Spartan", Arial, sans-serif;
	font-style: normal;
	text-transform: uppercase;
	margin-bottom: 2rem;
	font-size: 1.5rem;
}

.meter,
.progress{
	position: relative;
	font-size: 0;
}

.donation a.button{
	display: inline-block;
	white-space: normal;
	text-align: center;
}

.donation > p{
	font-style: normal;
}

.donation.counter > p:not(.donate-button){
	text-align: justify;
	max-width: 80ch;
	margin: 1rem auto;
	hyphens: auto;
}

.flipboard{
	font-style: normal;
	font-size: 2rem;
	margin: 2rem auto;
	line-height: 1;
	font-family: "League Spartan";
	text-transform: uppercase;
}

.flipboard span{
	background: #222;
	border: 1px solid #222;
	box-shadow: 1px 1px 0px rgba(255,255,255,.5) inset;
	border-radius: 5px;
	color: #fff;
	padding: .25rem 1rem 0 1rem;
	line-height: 1;
	position: relative;
	text-shadow: 2px 2px 0px #000;
	width: 1em;
	padding: .5em .25em;
	display: inline-block;
}

.flipboard span + span{
	margin-left: .1em;
}

.flipboard span::before{
	position: absolute;
	content: "";
	top: calc(50% - 5px);
	left: 0;
	height: 10px;
	width: calc(100% - 4px);
	border-left: 2px solid #aaa;
	border-right: 2px solid #aaa;
}

.flipboard span::after{
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	height: 50%;
	background: linear-gradient(180deg, rgb(255, 255, 255, .3) 0%, rgba(0,0,0,0) 75%);
	width: 100%;
	border-top: 1px solid #000;
}

.progress + p{
	margin-top: 2rem;
	hyphens: auto;
}

.meter p,
.progress p{
	font-size: 1rem;
	font-family: "League Spartan", Arial, sans-serif;
	left: 0;
	background: rgba(0, 0, 0, .1);
	font-style: normal;
	border-radius: .25rem;
	padding: .25rem .5rem;
	color: #fff;
	display: block;
	align-self: center;
	justify-self: center;
	justify-content: center;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, .5);
	border: 1px solid var(--border);
	margin-top: 0;
}

.progress p.start{
	margin-right: auto;
	margin-left: 1rem;
	border: none;
	background: transparent;
	padding: 0;
	font-size: .75rem;
}

.progress p.target{
	margin-left: auto;
	margin-right: 1rem;
	border: none;
	background: transparent;
	padding: 0;
	font-size: .75rem;
}

.meter > div,
.progress > div{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;

	/* Animate the div instead of the bar itself, because animating the bar triggers an
	FF bug that causes infinite requsts to stripes.svg */
	background: url("/images/stripes.svg") transparent;
	background-position: 0 0;
	animation: progress 4s linear infinite;
	z-index: 3;
}

meter,
progress{
	-webkit-appearance: none;
	appearance: none;
	height: 3rem;
	border: 1px solid var(--input-border);
	border-radius: .25rem;
	width: 100%;
	background: var(--body-bg);
	overflow: hidden;
}

progress::-webkit-progress-bar{
	background: var(--body-bg);
}

progress::-webkit-progress-value{
	background: var(--button);
	box-shadow: 1px 0 1px rgba(0, 0, 0, .25);
}

meter::-moz-meter-bar,
progress::-moz-progress-bar{
	background: var(--button);
	box-shadow: 1px 0 1px rgba(0, 0, 0, .25);
}

p.stretch-base{
	position: absolute;
	border: none;
	background: none;
	padding: 0;
	left: 70.5%;
	font-size: .75rem;
}

progress.stretch{
	--starting-pos: 71.5%;
	position: absolute;
	left: var(--starting-pos);
	top: 0;
	width: calc(100% - var(--starting-pos) + 1px);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	overflow: auto; /* enable drop shadow glow */
	border-left: none;
}

progress.stretch::-webkit-progress-value{
	background: #f2d745;
	box-shadow: none;
	filter: drop-shadow(0 0 10px #f2d745);
	border-right: 1px solid #E9C91F;
	border-left: 5px solid #E9C91F;
}

progress.stretch::-moz-progress-bar{
	background: #f2d745;
	box-shadow: none;
	filter: drop-shadow(0 0 10px #f2d745);
	border-right: 1px solid #E9C91F;
	border-left: 5px solid #E9C91F;
}

aside button.close{
	display: block;
	font-size: 0;
	border: none;
	box-shadow: none;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	background: url("/images/close.svg") transparent;
	background-size: 1rem 1rem;
	background-position: center;
	background-repeat: no-repeat;
	height: 3rem;
	width: 3rem;
	padding: 1rem;
	opacity: .75;
	margin: 0;
}

aside button.close:hover{
	opacity: 1;
}

aside button.close:active{
	left: auto;
	top: 1px;
	right: -1px;
}

.feeds-alert{
	border-top: 1px dashed var(--sub-text);
	padding-top: 2rem;
	font-style: italic;
	text-align: center;
	margin-top: 2rem;
}

@keyframes progress{
	0%{
		background-position: -60px 0px;
	}

	100%{
		background-position: 0 0;
	}
}

.downloads-container{
	display: flex;
}

.downloads-container figure + div{
	padding-left: 1rem;
}

a:has(figure.realistic-ebook):focus{
	outline: none;
}

a:focus figure.realistic-ebook img,
a:focus figure.realistic-ebook picture::after,
a:focus figure.realistic-ebook::after{
	outline: 1px dashed var(--input-outline);
}

figure.realistic-ebook.small{
	--size: 1rem;
}

figure.realistic-ebook,
figure.realistic-ebook.medium{
	--size: 1.5rem;
}

figure.realistic-ebook.large{
	--size: 2rem;
	margin-top: 2rem;
}

figure.realistic-ebook.xlarge{
	--size: 2.5rem;
	margin-top: 2rem;
}

figure.realistic-ebook.xxlarge{
	--size: 3rem;
	margin-top: 2rem;
}

figure.realistic-ebook{
	transform: skewY(-10deg) scale(.75);
	font-size: 0;
	width: 242px;
	box-sizing: border-box;
	margin-left: -2rem;
	align-self: flex-start;
}

figure.realistic-ebook img{ /* cover */
	/* override previous cascade */
	width: auto;
	background: #222;
	border-radius: 0 5px 5px 0;
	border: 2px solid #222;
	border-left: none;
	transition: transform .5s, filter .5s;
}

figure.realistic-ebook::after{ /* spine */
	content: "";
	position: absolute;
	width: calc(var(--size) + 2px);
	height: 100%;
	left: calc(-1 * var(--size));
	background: no-repeat center center url("/images/logo-spine.svg") #222;
	background-size: calc(var(--size) - .5rem) calc(var(--size) - .5rem);
	transform-origin: right;
	transform: skewY(45deg);
	z-index: -1;
	transition: transform .5s;
	top: 2px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

figure.realistic-ebook picture::before{ /* pages */
	content: "";
	position: absolute;
	width: var(--size);
	height: 235px;
	background: url("/images/pages-texture.svg") #fff;
	background-size: .5rem; /* needed to prevent visual glitch in FF */
	top: calc(-1 * (234px + (var(--size) / 2)) + 5px);
	left: calc(-1 * var(--size));
	transform: rotate(90deg) skewy(-45deg);
	transform-origin: bottom;
	border-left: 1px solid #222;
	transition: transform .5s;
	z-index: -1;
}

figure.realistic-ebook picture::after{ /* back board */
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: #222;
	top: 0;
	left: calc(-1 * var(--size));
	transform: translateY(calc(-1 * var(--size)));
	z-index: -2;
	border-top-right-radius: 5px;
	transition: transform .5s;
}

figure.realistic-ebook::before{ /* shadow */
	content: "";
	background: rgba(0, 0, 0, .5);
	position: absolute;
	top: calc(353px - var(--size));
	left: calc(-1 * var(--size));
	height: calc(1.25rem + var(--size));
	width: calc(100% + var(--size) + .25rem);
	transform: skewX(45deg);
	filter: blur(10px);
	z-index: -1;
	border-radius: 2rem;
	transition: transform .5s;
}

article.ebook.public-domain-day-placeholder #read-free p{
	text-align: center;
	font-style: italic;
}

article.ebook section#read-online ul li p.has-size{
	display: flex;
}

article.ebook section#read-online ul li p.has-size span{
	color: var(--warning);
	border: 1px solid var(--warning);
	border-radius: 5px;
	padding: .25rem .5rem;
	margin-left: .5rem;
}

article.ebook section#read-online ul li p.has-size span::before{
	content: "\f071";
	font-family: "Fork Awesome";
	margin-right: .25rem;
}

ul.feed p{
	margin: 0;
}

.url{
	font-family: "Fira Mono", monospace;
	font-size: .8rem;
	hyphens: none;
	word-break: break-word;
}

.center-notice{
	text-align: center;
	font-style: italic;
}

.votes{
	margin-top: 2rem;
}

.votes td:first-child{
	font-weight: bold;
}

.votes td{
	width: 50%;
	padding: 1rem;
	text-align: left;
}

.votes tr:first-child td{
	padding-top: 0;
}

.votes tr:last-child td{
	padding-bottom: 0;
}

.stinger{
	font-family: "Crimson Pro", serif;
	font-style: italic;
	font-size: 2rem;
}

.thank-you-container{
	display: flex;
	gap: 2rem;
}

.thank-you-container picture{
	flex-shrink: 0;
}

.join-patrons-circle-callout{
	border: 3px double;
	padding: 2rem;
	margin-top: 3rem;
}

.join-patrons-circle-callout h3{
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.join-patrons-circle-callout .button-row{
	margin-bottom: 1rem;
}

hr{
	margin: 2rem auto;
	border: 1px dashed var(--sub-text);
}

hr + p{
	margin-top: 0;
}

@media (hover: none) and (pointer: coarse){ /* target ipads and smartphones without a mouse */
	/* For iPad, unset the height so it matches the other elements */
	select[multiple]{
		height: calc(1rem + 1.4rem + 1rem + 2px) !important;
	}

	select[multiple] option[value="all"]{
		/* Hide the "all" button, because touchscreen devices
		have clearer ways to deselect options */
		display: none;
	}

	form[action="/ebooks"]{
		grid-template-columns: auto auto auto 1fr;
	}

	form[action="/ebooks"] label.tags{
		grid-row: 1;
	}

	form[action="/ebooks"] label:has(input[type="search"]){
		grid-column: 2 / span 3;
	}

	form[action="/ebooks"] label.sort{
		grid-column: 1;
		grid-row: 2;
	}

	form[action="/ebooks"] label.view{
		grid-column: 2;
		grid-row: 2;
	}

	form[action="/ebooks"] label.per-page{
		grid-column: 3;
		grid-row: 2;
	}

	form[action="/ebooks"] button{
		grid-column: 4;
		grid-row: 2;
	}
}

@media(max-width: 1200px){
	.download-list{
		overflow-x: scroll;
		display: block; /* needed to make overflow work */
		width: 100%;
	}

	.download-list .year-header th{
		text-align: left;
	}


	.download-list thead tr.mid-header:first-child th,
	.download-list tr.year-header:first-child th{
		padding-top: 0;
	}

	.download-list caption{
		display: block;
		padding-top: 2rem;
	}


}

@media(max-width: 1100px){
	form[action="/ebooks"]{
		grid-template-columns: auto auto auto 1fr;
	}

	form[action="/ebooks"] label.tags{
		grid-row: 1;
		grid-column: 1;
	}

	form[action="/ebooks"] label.tags select{
		height: calc(1rem + 1.4rem + 1rem + 2px); /* Size equal to a select boxes */
	}

	form[action="/ebooks"] label:has(input[type="search"]){
		grid-row: 1;
		grid-column: 2 / span 3;
	}

	form[action="/ebooks"] label.sort{
		grid-row: 2;
		grid-column: 1;
	}

	form[action="/ebooks"] label.view{
		grid-row: 2;
		grid-column: 2;
	}

	form[action="/ebooks"] label.per-page{
		grid-row: 2;
		grid-column: 3;
	}

	form[action="/ebooks"] button{
		grid-row: 2;
		grid-column: 4;
	}
}

@media(max-width: 1000px){
	body > header{
		flex-direction: column;
		align-items: center;
		padding-bottom: .5rem;
	}

	header nav li{
		margin-top: 1rem;
		padding-top: 0;
	}

	main.front-page h1{
		padding: 2rem;
	}

	main.front-page > section > section > div{
		flex-direction: column;
	}

	main.front-page > section > section > div figure{
		order: 1;
		margin: 0;
		margin-bottom: 2rem;
	}

	main.front-page > section > section > div div{
		order: 2;
		width: 100%;
	}

	main.front-page > section > section p{
		width: 100%;
	}

	article.ebook #more-ebooks ul{
		flex-wrap: wrap;
	}

	article.ebook #more-ebooks ul li{
		width: calc(25% - 1rem);
	}

	article.ebook #more-ebooks li img{
		width: 100%;
		height: auto !important;
	}

	#more-ebooks ul li:last-child{
		display: none;
	}

	footer ul.nav-links li{
		display: inline;
	}

	footer ul.nav-links li:nth-child(4)::after{
		content: "\A"; /* This is a line break */
		white-space: pre;
		margin: 0;
	}

	article.ebook section#download li span:nth-child(2){
		display: none;
	}

	article.ebook section#download li span:nth-child(3){
		display: block;
		margin-left: 2rem;
		padding-top: 0;
	}

	figure.realistic-ebook{
		transform: skewY(-10deg) scale(.5);
		margin-top: -1rem;
	}

	figure.realistic-ebook.large,
	figure.realistic-ebook.xlarge,
	figure.realistic-ebook.xxlarge{
		margin-top: 0;
	}

	.downloads-container figure + div{
		padding-left: 0;
	}
}

@media(max-width: 900px){
	ol.ebooks-list.grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.button-row{
		grid-template-columns: 1fr;
	}

	.donate a.button{
		white-space: normal;
	}

	.donate table td{
		display: block;
	}

	.donate table td:first-child{
		vertical-align: top;
	}

	.donate table td + td{
		padding-top: 0;
	}

	.donate table tr + tr td:first-child{
		padding-top: 2rem;
	}

	.donate table td p{
		text-align: center;
	}
}

@media(max-width: 870px){
	form[action="/ebooks"] button{
		grid-row: 3;
		grid-column: 1 / span 4;
		margin-top: 0;
	}
}

@media(max-width: 860px){
	article nav a[rel]{
		font-size: 0;
	}

	article nav a[rel]::before,
	article nav a[rel]::after{
		font-size: 1rem;
		margin: 0;
	}
}

@media(max-width: 860px){
	.thank-you-container picture{
		display: none;
	}
}

@media(max-width: 730px){
	form[action="/ebooks"]{
		grid-template-columns: auto auto 1fr 1fr;
	}

	form[action="/ebooks"] label.tags{
		grid-row: 1;
		grid-column: 1 / span 2;
	}

	form[action="/ebooks"] label:has(input[type="search"]){
		grid-row: 1;
		grid-column: 3 / span 2;
	}

	form[action="/ebooks"] label.sort{
		grid-row: 2;
		grid-column: 1 / span 3;
	}

	form[action="/ebooks"] label.view{
		grid-row: 3;
		grid-column: 1;
	}

	form[action="/ebooks"] label.per-page{
		grid-row: 3;
		grid-column: 2;
	}

	form[action="/ebooks"] button{
		grid-row: 3;
		grid-column: 4;
		margin-top: 1.4rem;
	}

	article nav ol li:not(.highlighted),
	main nav.pagination ol li:not(.highlighted){
		display: none;
	}
}

@media(max-width: 700px){
	ol.ebooks-list.grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	footer ul.nav-links li:nth-child(2)::after,
	footer ul.nav-links li:nth-child(5)::after{
		content: "\A"; /* This is a line break */
		white-space: pre;
		margin: 0;
	}

	footer ul.nav-links li:nth-child(4)::after{
		content: "\b7";
		white-space: normal;
		margin: 0 10px;
	}

	.ebooks-toolbar a.button{
		font-size: 0;
		gap: 0;
		padding: .5rem .75rem;
	}
}

@media(max-width: 680px){
	main.front-page h1{
		font-size: 2.4rem;
	}

	article.ebook section#details ul,
	article.ebook section#sources ul{
		grid-template-columns: 1fr;
	}

	article nav ol li.highlighted::before,
	article nav ol li.highlighted::after,
	main nav.pagination ol li.highlighted::before,
	main nav.pagination ol li.highlighted::after{
		display: none;
	}

	.donation,
	article.ebook section .donation{
		text-align: justify;
	}

	.donation .flipboard{
		text-align: center;
	}

	.donation .flipboard span{
		margin-bottom: 1rem;
	}

	.donation p:last-child,
	article.ebook section .donation p:last-child,
	.donation header p{
		text-align: center;
	}

	body > header{
		padding-top: 1rem;
	}

	body > header > a{
		max-width: calc(100% - 2rem);
	}

	body > header ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 1rem;
		margin-bottom: 0;
	}

	body > header ul li:nth-child(3){
		display: contents;
	}

	body > header ul li:nth-child(3)::after{
		content: "";
		width: 100%;
	}

	body > header ul li{
		margin: 0;
	}

	body > header ul li:nth-child(4)::before{
		display: none;
	}

	body > header ul li:nth-child(3) ~ li{
		margin-top: .5rem;
	}
}

@media(max-width: 580px){
	figure.realistic-ebook{
		display: none;
	}
}

@media(max-width: 550px){
	form[action="/ebooks"]{
		grid-template-columns: auto auto 1fr;
	}

	form[action="/ebooks"] label.tags{
		grid-row: 1;
		grid-column: 1 / span 3;
	}

	form[action="/ebooks"] label:has(input[type="search"]){
		grid-row: 2;
		grid-column: 1 / span 3;
	}

	form[action="/ebooks"] label.sort{
		grid-row: 3;
		grid-column: 1 / span 3;
	}

	form[action="/ebooks"] label.view{
		grid-row: 4;
		grid-column: 1;
	}

	form[action="/ebooks"] label.per-page{
		grid-row: 4;
		grid-column: 2;
	}

	form[action="/ebooks"] button{
		grid-row: 5;
		grid-column: 1 / span 3;
		margin-top: 0;
	}

	form[action="/newsletter/subscriptions"] label.text,
	form[action="/newsletter/subscriptions"] label.captcha,
	form[action="/newsletter/subscriptions"] fieldset{
		grid-column: 1 / span 2;
	}

	.masthead ol.donors.patrons{
		columns: 2;
	}
}

@media(max-width: 500px){
	main > article > form{
		margin-bottom: .5rem;
	}

	main nav.pagination{
		margin-top: .5rem;
	}

	article.ebook #more-ebooks ul{
		margin-top: 1rem;
	}

	article.ebook #more-ebooks ul li{
		width: calc(50% - 1rem);
		margin-top: 1rem;
	}

	article.ebook #history li time,
	article.ebook #history li p{
		display: block;
	}

	article.ebook #history li p{
		margin: 0;
		padding: 0;
	}

	main.front-page > section > section figure.stacked img.bottom,
	main.front-page > section > section figure.stacked img.top{
		width: 75%;
	}

	main.front-page > section > section figure.oss img{
		max-width: calc(50% - 2rem);
	}

	code{
		word-break: break-all;
		word-wrap: break-word;
	}

	article nav a[rel],
	main nav.pagination > a{
		margin-bottom: 0;
		font-size: 0;
	}

	main nav.pagination > a::before,
	main nav.pagination > a::after {
		font-size: 1rem;
		margin: 0 !important;
	}

	article nav a[rel]::before,
	main nav.pagination a[rel]::before,
	article nav a[rel]::after,
	main nav.pagination a[rel]::after{
		font-size: 1rem;
		margin: 0;
	}

	article.ebook > header > hgroup{
		margin: 1rem;
		padding: 1rem;
		max-width: 85%;
	}

	article.ebook h1{
		font-size: 1.5rem;
	}

	article.ebook > header > hgroup > h2{
		font-size: 1.2rem;
	}

	article.ebook #history li time{
		text-align: left;
	}

	form[action="/settings"] button:not(.close){
		display: block;
		margin-top: 1rem;
		margin-left: 0;
	}

	form[action="/settings"] button:not(.close),
	form[action="/settings"] span,
	form[action="/settings"] select{
		width: 100%;
	}

	.votes tr,
	.votes tr td{
		display: block;
		width: 100%;
		padding: 0;
	}

	.votes tr + tr{
		margin-top: 2rem;
	}

	footer ul.nav-links li:nth-child(2)::after,
	footer ul.nav-links li:nth-child(4)::after,
	footer ul.nav-links li:nth-child(6)::after{
		content: "\A"; /* This is a line break */
		white-space: pre;
		margin: 0;
	}

	footer ul.nav-links li:nth-child(1)::after,
	footer ul.nav-links li:nth-child(3)::after,
	footer ul.nav-links li:nth-child(5)::after{
		content: "\b7";
		white-space: normal;
		margin: 0 10px;
	}
}

@media(max-width: 470px){
	ol.ebooks-list.grid{
		grid-gap: 2rem;
	}

	.donation .flipboard{
		font-size: 1rem;
	}
}

@media(max-width: 420px){
	.masthead ol li img.contact{
		height: .75rem;
	}

	body > footer > p:first-of-type{
		line-height: 1.4;
	}

	.progress p.start,
	.progress p.target,
	.progress p.stretch-base{
		display: none;
	}

	.progress p{
		border: none;
		background: transparent;
	}
}

@media(max-width: 380px){
	main.front-page h1{
		font-size: 2rem;
	}

	h1,h2,h3,h4,h5,h6,code,.ebook h1 + p{
		hyphens: auto;
	}

	ol.ebooks-list.grid{
		grid-template-columns: 1fr;
	}

	form[action="/ebooks"]{
		grid-template-columns: 100%;
	}

	form[action="/ebooks"] label:has(input[type="search"]),
	form[action="/ebooks"] label.tags,
	form[action="/ebooks"] label.sort,
	form[action="/ebooks"] label.view,
	form[action="/ebooks"] label.per-page,
	form[action="/ebooks"] button{
		grid-column: 1;
	}

	form[action="/ebooks"] label.per-page{
		grid-row: 5;
	}

	form[action="/ebooks"] button{
		grid-row: 6;
	}

	body > header ul{
		flex-direction: column;
	}

	body > header ul li::before{
		display: none;
	}

	body > header ul li:nth-child(3){
		display: block;
	}

	body > header ul li:nth-child(2) ~ li,
	body > header ul li + li{
		margin-top: 1rem;
		padding-top: 0;
	}

	body > header ul li,
	body > header ul li:nth-child(2n){
		height: 1rem;
		text-align: center;
		display: block;
	}

	article nav a[rel],
	main nav.pagination > a{
		padding: 1rem;
	}

	ol.ebooks-list.list > li{
		grid-template-columns: 1fr;
	}

	ol.ebooks-list.list > li img{
		max-width: 50%;
		margin-bottom: 1rem;
	}

	.masthead ol.donors.patrons{
		columns: 1;
	}

	footer ul.nav-links li:nth-child(7)::after{
		content: "\A"; /* This is a line break */
		white-space: pre;
		margin: 0;
	}
}

@supports not(hyphens: auto){
	main,
	main.front-page > section > section p{
		text-align: left;
	}
}

@media(prefers-reduced-motion: reduce){
	body > header > a,
	header nav li a,
	header nav li a:hover,
	header nav li a[aria-current]:hover,
	a.button.next::after,
	main nav.pagination > a:last-child::after,
	a[href].button.next:hover::after,
	main nav.pagination > a:last-child[href]:hover::after,
	main nav.pagination > a:first-child:before,
	main nav.pagination > a:first-child[href]:hover::before,
	a.button.next:hover::after,
	main nav.pagination > a:last-child[href]:hover::after,
	article.ebook section#read-online a::before,
	article.ebook section#download ul li a[class]::before,
	article.ebook section#details ul li a[class]::before,
	article.ebook section#sources ul li a[class]::before,
	article.ebook #more-ebooks img,
	article.ebook #more-ebooks a:active img,
	ol.ebooks-list > li a[tabindex]:active,
	label:has(select) > span + span::after,
	label:has(input[type="search"]):focus-within::before,
	label:has(input[type="search"]):hover::before,
	label:has(select):hover > span + span::after,
	label:has(input[type="email"])::before,
	label:has(input[type="search"])::before,
	textarea:hover,
	nav li.highlighted a,
	nav a[rel],
	a.button,
	button,
	input[type="text"],
	input[type="month"],
	input[type="number"],
	input[type="url"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	select,
	a.button:hover,
	nav li.highlighted a:hover,
	nav a[rel]:hover,
	button:hover,
	input[type="text"]:focus,
	input[type="text"]:hover,
	input[type="month"]:focus,
	input[type="month"]:hover,
	input[type="number"]:focus,
	input[type="number"]:hover,
	input[type="url"]:focus,
	input[type="url"]:hover,
	input[type="email"]:focus,
	input[type="email"]:hover,
	input[type="password"]:focus,
	input[type="password"]:hover,
	input[type="search"]:focus,
	input[type="search"]:hover,
	select:focus,
	select:hover{
		transition: none;
	}
}

/* Animate some items if the user doesn't mind animation */
@media(prefers-reduced-motion: no-preference){
	ol.ebooks-list a[tabindex]:hover{
		transform: scale(1.05);
		color: unset;
	}

	ol.ebooks-list a[tabindex]:hover img{
		box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
	}

	ol.ebooks-list > li a[tabindex]:active{
		transform: scale(1.025);
		transition: none;
		box-shadow: none;
	}

	.ebook .downloads-container:hover figure img{ /* cover */
		filter: brightness(1.15);
		transform: translateY(-.5rem);
	}

	.ebook .downloads-container:hover figure picture::after{ /* back board */
		transform: translateY(calc(-1 * (var(--size) + .5rem)));
	}

	.ebook .downloads-container:hover picture::before{ /* pages */
		transform: rotate(90deg) skewy(-45deg) translateX(-.5rem) translateY(-.5rem);
	}

	.ebook .downloads-container:hover figure::after{ /* spine */
		transform: skewY(45deg) translateY(-.5rem);
	}

	.ebook .downloads-container:hover figure::before{ /* shadow */
		transform: skewX(45deg) scale(1.05);
	}
}