:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#000;color:#eee;font:16px/1.5 Arial,sans-serif}a{color:inherit;text-decoration:none}header{display:flex;justify-content:space-between;gap:20px;padding:28px 4vw}.brand{font-size:24px;font-weight:700;letter-spacing:-.06em}nav{display:flex;gap:22px;font-size:11px;align-items:center}main{max-width:1400px;margin:auto;padding:35px 6vw 70px}h1{font-size:32px;font-weight:400;margin:0 0 25px}ol{position:relative;z-index:2;list-style:none;padding:0;margin:0;width:50%;counter-reset:gallery}li{counter-increment:gallery}li a{display:block;padding:8px 0;font-size:clamp(15px,1.5vw,22px)}li a:before{content:counter(gallery,decimal-leading-zero);font:10px monospace;color:#666;margin-right:20px}li a:hover,li a:focus-visible{color:white;text-decoration:underline;text-underline-offset:5px}figure{position:fixed;right:5vw;top:18vh;width:40vw;height:65vh;margin:0;opacity:0;transition:opacity .5s;pointer-events:none}figure.visible{opacity:1}figure img{width:100%;height:90%;object-fit:contain;filter:grayscale(1)}figcaption{font-size:12px;color:#aaa;margin-top:12px;text-align:center}a:focus-visible{outline:1px solid white;outline-offset:4px}@media(max-width:700px){main{padding:25px 7vw 50px}ol{width:100%}figure{inset:20% 5% auto;width:90%;height:60%;z-index:0}figure.visible{opacity:.2}li a{font-size:17px}header{padding-inline:7vw}nav{gap:14px}h1{font-size:28px}}@media(prefers-reduced-motion:reduce){figure{transition:none}}

@media(min-width:701px){li a{font-size:18px;padding:3px 0}main{padding-top:20px}h1{margin-bottom:18px}}