
:root{--bg:#0d0b10;--fg:#eee;--accent:#e0457b;--muted:#9a93a3}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif;line-height:1.5}
a{color:var(--accent)}header{padding:48px 16px 20px;text-align:center}h1{margin:0;font-size:clamp(28px,6vw,52px);letter-spacing:.04em}
header p{color:var(--muted);max-width:680px;margin:10px auto}nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}nav a{text-decoration:none}nav a.on{color:#fff}
section{max-width:1300px;margin:40px auto;padding:0 16px}h2{color:var(--accent);margin:0 0 4px}.lead{color:var(--muted);margin:0 0 16px;max-width:780px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;grid-auto-flow:dense}
.card{position:relative;display:block;border-radius:10px;overflow:hidden;background:#1d1922;aspect-ratio:2/3}
.card.wide{grid-column:span 2;aspect-ratio:16/9}.card.full{grid-column:1/-1;aspect-ratio:auto}.card.full img{height:auto}
@media(max-width:600px){.card.wide{grid-column:span 1}}
.card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}.card:hover img{transform:scale(1.03)}
.card.fit img{object-fit:contain;background:#e9e7ec}
.card span{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:linear-gradient(transparent,#000c);color:#fff;font-weight:600;font-size:14px}
.proj{aspect-ratio:16/9}.proj span{font-size:20px;padding:14px 16px}.proj small{display:block;font-weight:400;font-size:13px;color:#ddd}
.about{max-width:820px}footer{text-align:center;color:var(--muted);font-size:13px;padding:32px 16px}
#gate,#lb{position:fixed;inset:0;background:#000e;display:flex;align-items:center;justify-content:center;z-index:9;padding:16px}
#gate .box{max-width:440px;padding:32px;background:#1a1620;border-radius:14px;text-align:center}
#gate button{margin:8px;padding:12px 22px;border:0;border-radius:8px;font-size:16px;cursor:pointer}#yes{background:var(--accent);color:#fff}
#lb{display:none;cursor:zoom-out}#lb img{max-width:96vw;max-height:94vh}body.locked main{filter:blur(30px)}
.g2,.g3,.g4,.g5{display:grid;gap:12px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.g4,.g5{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.g2,.g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}}
.g2 .card,.g3 .card,.g4 .card,.g5 .card{grid-column:auto}
.ar-p .card{aspect-ratio:2/3}.ar-w .card{aspect-ratio:16/9}.ar-s .card{aspect-ratio:3/2}.ar-auto .card{aspect-ratio:auto}.ar-auto .card img{height:auto}
.card.full{grid-column:1/-1;aspect-ratio:auto}.card.full img{height:auto}
.card.gray img{object-fit:contain;background:#8e8c91}.card.dark img{object-fit:contain;background:#16131b}.card.light img{object-fit:contain;background:#e9e7ec}
.hero{position:relative;max-width:1300px;margin:8px auto 0;padding:0 16px}.hero a{display:block;border-radius:14px;overflow:hidden;position:relative}
.hero img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover}.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 24px 20px;background:linear-gradient(transparent,#000d)}
.hero h2{color:#fff;font-size:clamp(22px,4vw,40px);margin:0}.hero p{color:#ddd;margin:6px 0 0;max-width:720px}
.sub{color:var(--accent);font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 6px}
.card.span2{grid-column:1/-1!important}
section>div+div{margin-top:12px}
