body { overflow-x: hidden; }
.outline-type { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.68); }
.hero-shade { background: linear-gradient(90deg,rgba(6,6,7,.98) 0%,rgba(6,6,7,.90) 28%,rgba(6,6,7,.34) 53%,rgba(6,6,7,.04) 75%),linear-gradient(0deg,rgba(6,6,7,.78),transparent 34%); }
.art-card .art-image { transition: transform .6s cubic-bezier(.16,1,.3,1), filter .3s ease; }
.art-card:hover .art-image { transform: scale(1.03); }
.art-card:hover .inspect-overlay { opacity: 1; }
.adult-image { filter: blur(30px) saturate(.65) brightness(.65); transform: scale(1.08); }
.modal-open { overflow: hidden; }

/* Gallery spans are static CSS because cards are rendered after Tailwind CDN scans the page. */
#gallery .gallery-span-4 { grid-column: span 4 / span 4; }
#gallery .gallery-span-3 { grid-column: span 3 / span 3; }
#gallery .gallery-span-2 { grid-column: span 2 / span 2; }
#gallery .ratio-span-4 { aspect-ratio: 16 / 10; }
#gallery .ratio-span-3 { aspect-ratio: 16 / 11; }
#gallery .ratio-span-2 { aspect-ratio: 1 / 1; }

img {
  pointer-events: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 1000px) {
  #gallery .gallery-span-4,
  #gallery .gallery-span-3,
  #gallery .gallery-span-2 { grid-column: span 1 / span 1; }

  /* On smaller screens every artwork tile uses the same footprint. */
  #gallery .ratio-span-4,
  #gallery .ratio-span-3,
  #gallery .ratio-span-2 { aspect-ratio: 1 / 1; }
}
@media (max-width: 900px) {
  .hero-shade { background: linear-gradient(0deg,#060607,rgba(6,6,7,.18) 65%); }
}

/* Viewer modal layout — plain media query, no Tailwind arbitrary variants,
   so it can't silently fail to apply. */
.viewer-window {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  max-height: 90vh;
}
.viewer-arrows-mobile { display: none; }

@media (max-width: 900px) {
  .viewer-window {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    max-height: 94vh;
  }
  .viewer-arrow-desktop { display: none; }
  .viewer-arrows-mobile { display: flex; }
  .viewer-image-wrap { padding: 12px; }
  .viewer-img { max-height: 58vh; }
  .viewer-aside { border-left: none; border-top: 1px solid #25242a; padding: 20px; }
  .viewer-title { font-size: 28px; }
}