*,
::before,
::after {
    box-sizing: border-box;
}

html {
    font-family: "bembo-book-mt-pro", "Times New Roman", serif;
}

body {
    min-height: 100vh;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    font-size: 16pt;
    text-align: justify;
}

h2, h3 {
    margin: 0.5em 0 0.1em;
}

h2 {
    margin-left: 1em;
    font-size: 1.2em;
}

h3 {
    margin-left: 1.25em;
    font-size: 1em;
}

.main-normal, .main-gallery {
    margin: 0 auto;
    min-width: 980px;
}

.main-normal {
    max-width: 980px;
}

.main-gallery {
    max-width: 1200px;
}

a {
    color: inherit;
}

p {
    margin: 0 0 0.5em;
}

header {
    border-bottom: 2px dotted;
    margin-bottom: 1em;
}

footer {
    border-top: 2px dotted;
    margin-top: 2em;
    text-align: center;
    font: italic small "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.template-homepage main {
    text-align: center;
}

.family-genus-align {
    text-align: center;
    font-size: larger;
    font-weight: bold;
    margin: 1em 0 0.75em;
}

.family-name {
    text-transform: uppercase;
}

.version-author {
    font-variant: small-caps;
    text-align: center;
    margin: 1em 0;
}

.version-year {
    font-size: small;
    text-align: center;
    margin-bottom: 1em;
}

.version-year::before {
    content: "[version ";
}

.version-year::after {
    content: "]";
}

.species-name {
    font-weight: bold;
}

.key, .normal {
    font-family: "bembo-book-mt-pro", "Times New Roman", serif;
    text-align: justify;
}

.key {
    line-height: 1.25;
    text-indent: 0;
}

.key::first-letter {
    margin-left: -25px;
}

.normal {
    text-indent: 2em;
    font-size: 16pt;
}

.species {
    padding-top: 25px;
}

.entry {
    display: grid;
    grid-template: "chapter page" / auto max-content;
    align-items: end;
    gap: 0 0.25rem;
}

.chapter {
    grid-area: chapter;
    position: relative;
    overflow: hidden;
}

.chapter-taxon::after {
    position: absolute;
    padding-left: .25ch;
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
    text-align: right;
}

.essay-title, .essay-heading, .list-heading {
    font-weight: bold;
    font-variant: small-caps;
    margin: 1em 0 0.25em;
}

.essay-author {
  font-style: italic;
}

.essay-title {
    font-size: x-large;
}

.essay-heading, .list-heading {
    font-size: larger;
}

.list-heading {
    list-style: none;
    break-inside: avoid;
}

.list-item, .list-link {
    list-style: disc;
}

.list-link {
    text-indent: 3em;
}

.endemic-label {
    color: #1b7728;
    margin: 0 0 0.5em 1.5em;
}

.endemic-label::before {
    content: "[";
}

.endemic-label::after {
    content: "]";
}

.large-image-row {
    text-align: center;
}

.side-by-side-image-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.side-by-side-image-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.side-by-side-image {
    width: 100%;
    height: auto;
}

.image-detail-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-detail-page {
    text-align: center;
    max-width: fit-content;
}

.binomial, .caption, .image_info, .note, .table-caption, .footer-return-link, .author {
    font-style: italic;
}

.caption, .image_info, .table-caption {
    font-size: smaller;
    text-align: center;
}

.caption, .table-caption {
    font-weight: bold;
}

.caption {
    margin-bottom: 5px;
    align-self: center;
}

.image_info, .table-caption, .note {
    margin-top: 5px;
}

.note {
    font-size: x-small;
    text-align: right;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    table-layout: fixed;
    font-family: "bembo-book-mt-pro", "Times New Roman", serif;
}

th {
    font-style: italic;
}

td {
    text-align: left;
    vertical-align: middle;
    padding: 5px;
}

.footer-return-link, .return-link {
    font-size: smaller;
    text-align: right;
}

.footer-return-link {
    padding: 10px 0;
}

.film-strip {
    margin: 2rem 0;
}