* { box-sizing: border-box; }
body { margin: 0; background: #050505; color: #c9c9c9; font: 15px/1.7 "Courier New", monospace; }
a { color: #f5f5f5; }
header { padding: 40px 48px 10px; }
header a { text-decoration: none; color: #fff; font-size: 22px; letter-spacing: .4em; }
header p { margin: 6px 0 0; color: #6d6d6d; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
nav { padding: 0 48px; display: flex; gap: 24px; font-size: 13px; text-transform: uppercase; letter-spacing: .2em; }
nav a { color: #8a8a8a; text-decoration: none; }
nav a.on, nav a:hover { color: #fff; }
main { padding: 40px 48px 70px; max-width: 1100px; }
.wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.work img { width: 100%; display: block; border: 1px solid #222; transition: filter .4s; filter: grayscale(.25); }
.work:hover img { filter: none; }
.work h3 { color: #fff; font-weight: 400; margin: 14px 0 0; letter-spacing: .2em; }
.label { color: #6d6d6d; font-size: 13px; }
.big img { width: 100%; max-width: 960px; display: block; border: 1px solid #222; }
.dl { display: inline-block; margin-top: 18px; padding: 10px 18px; border: 1px solid #555; text-decoration: none; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; }
.dl:hover { background: #fff; color: #000; }
footer { padding: 30px 48px; color: #4a4a4a; font-size: 12px; border-top: 1px solid #151515; }