[hidden]{display:none!important}
:root{--ink:#111;--mute:#9a9a9a;--pad:20px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 15px/1.35 "Source Serif 4",Georgia,serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block}
p{margin:0}

.hd{position:fixed;z-index:10;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;padding:14px var(--pad);background:#fff}
.hd .r{justify-self:end;display:flex;gap:28px}
.hd a:hover,.hd button:hover{color:var(--mute)}

/* every work, evenly, like marks in a field */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 20px;padding:84px var(--pad) 120px}
.grid a{display:flex;align-items:flex-start;aspect-ratio:3/4}
.grid img{max-width:100%;max-height:100%;object-fit:contain;object-position:left top;transition:opacity .25s}
.grid a:hover img{opacity:.75}

/* index: a plain table */
.index{padding:84px var(--pad) 120px}
.row{display:grid;grid-template-columns:3fr 100px 3fr 110px;gap:16px;padding:1px 0}
.row.th{color:var(--mute);margin-bottom:10px}
.index a:hover{color:var(--mute)}

.filt{position:fixed;left:var(--pad);bottom:14px;display:flex;gap:14px;color:var(--mute);background:#fff}
.filt .on,.filt button:hover{color:var(--ink)}
.dim{opacity:.12;pointer-events:none}

/* one work */
.one{position:fixed;inset:0;z-index:20;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px var(--pad)}
.one img{max-width:90vw;max-height:80vh}
.one p{color:var(--mute);text-align:center;max-width:70ch}
.one .x{position:absolute;top:14px;right:var(--pad)}
.one .pv,.one .nx{position:absolute;bottom:14px}
.one .pv{left:var(--pad)}.one .nx{right:var(--pad)}

.about{max-width:620px;padding:30vh var(--pad) 80px;margin:0 auto;display:flex;flex-direction:column;gap:1.2em}
.about a{border-bottom:1px solid var(--mute)}

@media (max-width:820px){
  .hd{grid-template-columns:auto 1fr;gap:8px}
  .hd .nm{display:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:32px 12px;padding-top:64px}
  .row{grid-template-columns:1fr 64px}
  .row span:nth-child(n+3){display:none}
  .index{padding-top:64px}
  .about{padding-top:20vh}
}