:root{--bg:#fff;--fg:#111;--mute:#777;--line:#e6e6e6}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font:300 16px/1.6 "Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
header{display:flex;justify-content:space-between;align-items:baseline;padding:28px 4vw;flex-wrap:wrap;gap:12px}
.logo{font-weight:500;letter-spacing:.35em;text-decoration:none;text-transform:uppercase;font-size:15px}
nav a{margin-left:26px;text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
nav a:hover,nav a.on{color:var(--fg)}
main{padding:0 4vw 80px}
h1{font-weight:300;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:10px 0 28px}
.grid{columns:3 320px;column-gap:14px}
.grid figure{break-inside:avoid;margin-bottom:14px;cursor:zoom-in}
.grid img{width:100%;height:auto;display:block;transition:opacity .2s}
.grid img:hover{opacity:.85}
.page{max-width:640px;margin:40px auto}
.page p{margin-bottom:1.2em}
.btn{display:inline-block;border:1px solid var(--fg);padding:10px 22px;text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.btn:hover{background:var(--fg);color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:30px 0}
.card{border:1px solid var(--line);padding:24px}
.card h3{font-weight:400;font-size:15px;margin-bottom:6px}
.price{color:var(--mute);margin-bottom:10px}
footer{padding:30px 4vw;border-top:1px solid var(--line);font-size:12px;color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
#lb{position:fixed;inset:0;background:#fff;display:none;align-items:center;justify-content:center;z-index:9;cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:94vw;max-height:92vh}