[hidden]{display:none!important}
*{box-sizing:border-box}
:root{--bg:#0b0b0d;--surface:#121216;--surface-2:#18181d;--text:#eeeef0;--muted:#96969d;--soft:#c9c9ce;--line:#29292f;--accent:#fff}
html{scroll-behavior:smooth}
body{margin:0;padding:0 4vw 6vw;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.viewer-open{overflow:hidden}
.site-header{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.brand{text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:650}
.main-nav{display:flex;flex-wrap:wrap;gap:3px}
.nav-button{border:0;background:transparent;color:var(--muted);padding:8px 11px;border-radius:999px;transition:.18s ease}
.nav-button:hover,.nav-button.active{color:var(--text);background:var(--surface-2)}
.count{font-size:11px;color:var(--muted);margin-left:3px}
.eyebrow{margin:0 0 10px;color:var(--muted);font-size:10px;letter-spacing:.14em;font-weight:700}
.intro h1{max-width:760px;margin:0;font-size:clamp(30px,5vw,62px);line-height:1.02;font-weight:450;letter-spacing:-.035em}
.style-chip:hover,.gallery-bar{display:flex;align-items:center;justify-content:space-between;min-height:54px}
.result-count{margin:0;color:var(--muted);font-size:12px}
.clear-filter{border:0;background:transparent;color:var(--soft);padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.gallery{columns:4 250px;column-gap:22px}
.art{break-inside:avoid;margin:0 0 28px}
.art-image{position:relative;overflow:hidden;background:var(--surface);border-radius:6px}
.art-image img{display:block;width:100%;cursor:zoom-in;transition:transform .35s ease,filter .35s ease}
.art:hover .art-image img{transform:scale(1.015);filter:brightness(1.04)}
.new{position:absolute;z-index:2;top:12px;left:12px;background:#000c;color:#fff;border:1px solid #ffffff20;border-radius:999px;padding:4px 8px;font-size:9px;letter-spacing:.12em}
.art-favorite{position:absolute;z-index:2;right:10px;bottom:10px;width:34px;height:34px;border:1px solid #ffffff22;border-radius:50%;background:#050507bb;color:#fff;font-size:17px;opacity:0;transition:.18s ease;backdrop-filter:blur(8px)}
.art:hover .art-favorite,.art-favorite:focus{opacity:1}
.meta{padding:10px 2px 0}
.meta h2{margin:0;font-size:14px;font-weight:500}
.meta p{margin:2px 0 0;color:var(--muted);font-size:12px}
.empty-state{grid-column:1/-1;text-align:center;padding:15vh 20px;color:var(--muted)}
.empty-state h2{margin:0;color:var(--text);font-size:26px;font-weight:450}
.empty-state p:last-child{max-width:420px;margin:10px auto;line-height:1.7}
.viewer{position:fixed;inset:0;z-index:20;background:#050506f8;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center}
.viewer-figure{margin:0;text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.viewer-image-wrap{height:calc(100vh - 150px);display:flex;align-items:center;justify-content:center}
.viewer img{max-width:92vw;max-height:calc(100vh - 145px);object-fit:contain}
.viewer figcaption{order:0;margin:0 0 16px;color:var(--text);font-size:15px;font-weight:500;letter-spacing:.01em}
.viewer-button{border:0;background:transparent;color:#eee;font-size:34px;padding:18px;opacity:.7;transition:.18s ease}
.viewer-button:hover{opacity:1}
.viewer .close{position:absolute;z-index:2;right:14px;top:8px;font-size:30px}
.viewer .info{position:absolute;z-index:2;left:50%;transform:translateX(-50%);bottom:18px;font-size:12px;font-weight:600;letter-spacing:.02em;border:1px solid var(--line);border-radius:999px;width:auto;min-width:108px;height:38px;padding:0 15px;background:#111116cc;backdrop-filter:blur(8px)}
.card{position:fixed;z-index:30;right:18px;top:18px;bottom:18px;width:min(410px,calc(100vw - 36px));background:#141419f8;border:1px solid var(--line);border-radius:14px;padding:32px;overflow:auto;box-shadow:0 24px 80px #000b;backdrop-filter:blur(18px)}
.card-close{position:absolute;right:13px;top:9px;border:0;background:transparent;color:var(--muted);font-size:25px}
.card h2{margin:0 0 20px;font-size:28px;line-height:1.1;font-weight:450}
.card-description{color:var(--soft);line-height:1.75}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:25px}
.tag{border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:var(--muted);font-size:11px}
@media(max-width:800px){.gallery{columns:3 190px}}
@media(max-width:600px){body{padding:0 18px 40px}.site-header{align-items:flex-start;flex-direction:column;padding:18px 0}.intro h1{font-size:36px}.gallery{columns:2 135px;column-gap:12px}.art{margin-bottom:18px}.art-favorite{opacity:1;width:30px;height:30px;font-size:15px}.viewer{grid-template-columns:44px minmax(0,1fr) 44px}.viewer-button{font-size:28px;padding:10px}.viewer img{max-width:95vw;max-height:calc(100vh - 130px)}.viewer .info{font-size:11px;min-width:96px;height:34px;padding:0 12px;left:50%;transform:translateX(-50%);bottom:12px}.card{right:10px;top:10px;bottom:10px;width:calc(100vw - 20px)}}


.retry-button{
  margin-top:18px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  padding:9px 14px;
  border-radius:999px;
  cursor:pointer;
}
.retry-button:hover{border-color:#55555d}
.gallery-error p{max-width:700px!important}
.image-error{
  min-height:180px;
  background:var(--surface-2);
}

/* Simple gallery header */
.header-instruction{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  max-width:520px;
}

/* Mobile-first adjustments */
@media (max-width: 700px){
  .site-header{
    padding:14px 16px;
    gap:10px;
    flex-wrap:wrap;
  }

  .brand{
    font-size:18px;
  }

  .main-nav{
    width:100%;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .main-nav::-webkit-scrollbar{
    display:none;
  }

  .nav-button{
    flex:0 0 auto;
    min-height:42px;
    padding:9px 13px;
  }

  .header-instruction{
    order:3;
    width:100%;
    max-width:none;
    font-size:12px;
  }

  .gallery-bar{
    padding:12px 16px;
  }

  .gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:0 8px 24px;
  }

  .art-image{
    aspect-ratio:3 / 4;
  }

  .meta{
    padding:8px 8px 10px;
  }

  .meta h2{
    font-size:13px;
  }

  .meta p{
    font-size:11px;
  }

  .art-favorite{
    width:40px;
    height:40px;
    font-size:21px;
  }

  .viewer{
    padding:10px;
  }

  .viewer-image-wrap{
    max-height:calc(100vh - 110px);
    max-width:100%;
  }

  .viewer-figure{
    width:100%;
  }

  .viewer-figure img{
    max-height:calc(100vh - 140px);
    max-width:100%;
  }

  .viewer-button.prev,
  .viewer-button.next{
    width:42px;
    height:42px;
  }

  .viewer-button.prev{
    left:8px;
  }

  .viewer-button.next{
    right:8px;
  }

  .viewer-button.info{
    bottom:12px;
  }

  .viewer-button.close{
    top:8px;
    right:8px;
  }

  .card{
    left:12px;
    right:12px;
    bottom:12px;
    max-height:70vh;
    overflow:auto;
  }
}

@media (max-width: 420px){
  .gallery{
    gap:6px;
    padding-left:6px;
    padding-right:6px;
  }

  .meta h2{
    font-size:12px;
  }
}