/* Retain the original grey background, logo, cover artwork and typography. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
#logo-header { position: relative; top: auto; line-height: 0; text-align: left; }
#logo-header img { max-width: 100%; height: auto; }
#main-content { top: 0; width: auto; max-width: 1150px; margin: 0 6% 32px; }
#main-content img { max-width: 100%; height: auto; }
#main-content { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }
#book-list { display: flex; flex-wrap: wrap; }
.book { float: none; height: auto; min-height: 240px; }
.book img { margin: 0 auto; }
.site-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: fit-content; max-width: 100%; margin: 1em 0; padding: 10px; background: #f0f4e8; border: 1px solid #647c3e; }
.site-search label { flex: 0 0 auto; font-weight: bold; white-space: nowrap; }
.site-search input { flex: 0 1 230px; width: 230px; min-width: 7ch; padding: 6px; background: white; border: 1px solid #666; }
.site-search input:focus { outline: 2px solid #48672a; outline-offset: 1px; }
.site-search button { padding: 6px 10px; font-weight: bold; }
input, select, button { font: inherit; }
input, select { max-width: 100%; }
.archive-search-nav { margin: 1em 0; line-height: 1.5; }
@media (max-width: 640px) {
 body { font-size: 16px; line-height: 1.45; }
 .site-search { width: 100%; gap: 6px; padding: 8px; font-size: 14px; }
 .site-search input { flex: 1 1 8ch; width: 8ch; max-width: 230px; }
 .site-search button { padding: 6px; }
 #main-content { margin: 0 8px 24px; padding: 12px; }
 h1 { font-size: 1.45em; line-height: 1.25; }
 .book { flex: 1 1 130px; width: auto; max-width: calc(50% - 16px); margin: 8px; }
 table { display: block; max-width: 100%; overflow-x: auto; }
 table table { display: table; }
 table[align="right"] { float: none; margin: 0 auto; }
}