.ex-head { max-width: 40rem; padding-top: 6vh; margin-bottom: 2.5rem; }
.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, .back a, .facts a { text-decoration: underline; text-underline-offset: .2em; }
.meter { margin-top: 1.5rem; font-size: .8125rem; color: var(--muted); }
.meter .bar { height: 2px; background: #e6e6e6; margin-top: .4rem; }
.meter .bar i { display: block; height: 2px; background: var(--ink); }
.draw-button { display: inline-block; margin-top: 1.5rem; padding: .55rem 1.4rem; background: var(--ink); color: #fff; }
.draw-button:hover { opacity: .85; text-decoration: none; }
.closed { margin-top: 1.5rem; }
.sheet-shadow { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.10), 0 12px 24px rgba(0,0,0,.08); }
.grid { list-style: none; margin: 0 0 3rem; padding: 0; display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 2.25rem 1.5rem; }
.grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: fill; }
.grid .cap { margin-top: .6rem; font-size: .75rem; color: var(--muted); }
.grid .cap b { font-weight: 400; color: var(--ink); }
.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 .note { font-size: .8125rem; color: var(--muted); }
.to-top { margin-top: 2rem; font-size: .875rem; }
.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%; max-width: 600px; height: auto; aspect-ratio: 3 / 4; }
.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); }
.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, 600px) minmax(16rem, 30rem); justify-content: start; align-items: start; }
}
html { scroll-behavior: smooth; }