.ex-head { max-width: 40rem; padding-top: 6vh; margin-bottom: 3rem; }
.ex-head h1 { font-style: italic; }
.ex-head .meta { color: var(--muted); margin-bottom: 1.5rem; }
.grid { list-style: none; margin: 0 0 3rem; padding: 0; display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
        gap: 2.5rem 1.5rem; }
.grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.grid a:hover img, .grid a:focus-visible img { opacity: .85; }
.grid .cap { margin-top: .5rem; font-size: .8125rem; }
.grid .cap span { color: var(--muted); }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; }
.sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3rem;
         padding-top: 2rem; margin-bottom: 3rem; }
.sheet img { display: block; width: 100%; height: auto; }
.sheet h1 { font-style: italic; }
.sheet .meta { color: var(--muted); margin-bottom: 1.5rem; }
.sheet .caption { font-size: .875rem; max-width: 34rem; }
.sheet .files { margin-top: 1.5rem; font-size: .875rem; }
.sheet .files a, .pager a, .back a { text-decoration: underline; text-underline-offset: .2em; }
.back { padding-top: 1rem; font-size: .875rem; }
.sheet-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 3rem; }
.sheet-nav .next { margin-left: auto; }
@media (min-width: 60rem) {
  .sheet { grid-template-columns: max-content minmax(16rem, 34rem); align-items: start; }
  .sheet img { width: auto; height: min(85vh, 1600px); max-width: 100%; }
}