.ex-head { max-width: 40rem; padding-top: 6vh; margin-bottom: 3rem; }
.ex-head h1 { font-style: italic; }
.ex-head .meta { color: var(--muted); }
.ex-lead { margin-top: 1.5rem; }
.ex-more { margin-top: .75em; }
.ex-more a, .to-top a, .ex-about a, .pager a, .back a, .facts a { text-decoration: underline; text-underline-offset: .2em; }
.ex-about { max-width: 40rem; margin: 2rem 0 4rem; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,.12); }
.ex-about h2 { font-weight: 700; margin-bottom: 1rem; }
.ex-about p + p { margin-top: .75em; }
.ex-about .credits { margin-top: 1.5rem; font-size: .8125rem; color: var(--muted); }
.to-top { margin-top: 2rem; font-size: .875rem; }
html { scroll-behavior: smooth; }
.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: 297 / 420; }
.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; }
.back { padding-top: 1rem; font-size: .875rem; }
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3rem; padding-top: 2rem; margin-bottom: 3rem; }
.work img { display: block; width: 100%; height: auto; }
.work h1 { font-style: italic; }
.work .meta { color: var(--muted); }
.facts { margin-top: 1.75rem; font-size: .8125rem; }
.facts p { margin: .2rem 0; }
.facts .k { color: var(--muted); }
.facts .gap { margin-top: .9rem; }
.artist-links { margin-top: 2rem; font-size: .8125rem; color: var(--muted); }
.artist-links a { text-decoration: underline; text-underline-offset: .2em; }
.work > div > p:first-child a { text-decoration: none; }
.nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 3rem; }
.nav a { text-decoration: underline; text-underline-offset: .2em; }
.nav .next { margin-left: auto; }
@media (min-width: 60rem) {
  .work { grid-template-columns: minmax(0, max-content) minmax(16rem, 30rem); justify-content: start; align-items: start; }
  .work img { width: min(1188px, calc(88vh * 297 / 420)); max-width: 100%; }
}