.ex-head { max-width: 40rem; padding-top: 6vh; margin-bottom: 3rem; }
.ex-head h1 { font-style: italic; }
.ex-head .meta { color: var(--muted); }
.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; }
.pager a, .back a, .src a { text-decoration: underline; text-underline-offset: .2em; }
.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, .src { font-size: .8125rem; }
.facts { margin-top: 1.75rem; }
.facts p { margin: .2rem 0; }
.facts .k, .src > p { color: var(--muted); }
.src { margin-top: 2rem; }
.src ol { list-style: none; padding: 0; margin: .4rem 0 0; }
.src li { display: flex; white-space: nowrap; margin: .15rem 0; color: var(--muted); }
.src li > * { flex: none; }
.src .what { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.src b { font-weight: 600; color: var(--ink); }
.nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 3rem; }
.nav .next { margin-left: auto; }
@media (min-width: 60rem) {
  .work { grid-template-columns: minmax(0, max-content) minmax(16rem, 32rem); justify-content: start; align-items: start; }
  .work img { width: min(1200px, calc(85vh * .75)); max-width: 100%; }
}