:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#101010;color:#f4f1ed;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;padding:0 4vw 40px;max-width:1800px;margin-inline:auto}
header{display:flex;align-items:baseline;justify-content:space-between;padding:32px 0 26px;border-bottom:1px solid #333;margin-bottom:28px;gap:20px}
h1{font-size:clamp(18px,2vw,26px);font-weight:900;letter-spacing:-.055em;margin:0}
header>span{font-size:10px;letter-spacing:.2em;color:#999}
.versions,.references{display:grid;gap:24px}
.versions{grid-template-columns:repeat(2,minmax(0,1fr))}
.references{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:42px;padding-top:26px;border-top:1px solid #333}
article{min-width:0}
.artwork{display:block;aspect-ratio:2.15;background:#000;overflow:hidden;border:1px solid #242424;transition:border-color .15s}
.artwork:hover{border-color:#777}
.artwork img{display:block;width:100%;height:100%;object-fit:cover}
.cover img{object-fit:contain;padding:12px}
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
h2{font-size:13px;font-weight:500;margin:0}
nav{display:flex;gap:18px}
a{color:inherit;text-decoration:none}
footer a{font-size:11px;letter-spacing:.04em;color:#aaa;white-space:nowrap;padding-block:8px}
footer a:hover{color:#fff}
footer a span{color:#f04444;margin-left:3px}
a:focus-visible{outline:2px solid #f04444;outline-offset:5px}
.references h2{color:#aaa}
@media(max-width:700px){body{padding-inline:20px}header{padding-top:24px}.versions{grid-template-columns:1fr;gap:20px}.references{grid-template-columns:1fr;margin-top:24px;gap:16px}.cover{aspect-ratio:2.15}footer{padding:10px 0}footer a{padding-block:12px}}
@media(prefers-reduced-motion:reduce){.artwork{transition:none}}

.artwork.transparent{background:repeating-conic-gradient(#343434 0% 25%,#252525 0% 50%) 50%/20px 20px}

.versions .artwork{aspect-ratio:auto}.versions .artwork img{height:auto;object-fit:contain}