/* ================================================================
   ARTWORKS PAGE — artworks.css
   ================================================================ */

body.page-artworks {
  --bg: #ffd633;
  /* Was #fff — only consumer of this var is the shared CTA footer
     (.sv-cta in nav.css), and white text on this page's bright yellow
     read as barely-there. Matches the navy ink (#0a1929) used
     everywhere else on this page (nav text, hero title). */
  --fg: #0a1929;
  --line: rgba(255, 255, 255, 0.14);
  /* The CRT bezel's edge-softening blur (style.css, --tv-edge-blur,
     9px by default → ~27px of soft falloff into the page) eats real
     estate the gallery could use, especially top/bottom where it
     visibly fades the nearest row of thumbnails. Reduced here only —
     everywhere else keeps the full 9px falloff. */
  --tv-edge-blur: 0px;
  overflow: auto;
  /* Blueprint grid */
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-attachment: fixed;
}

/* ── CROSSHAIR CURSOR ────────────────────────────────────────── */
.cursor-crosshair {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
.cc-h {
  position: absolute;
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.80);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.cc-v {
  position: absolute;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.80);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.cc-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ── FIXED HEADER OVERLAY ────────────────────────────────────── */
.artworks-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  /* Was 120px top — the nav sits at top:58px/height:46px (ends ~104px),
     so the title started just 16px below it. More clearance so it
     reads as a deliberate gap, not a near-collision. */
  padding: 138px 48px 38px;
  background: linear-gradient(
    to bottom,
    rgba(255, 214, 51, 0.96) 0%,
    rgba(255, 214, 51, 0.72) 34%,
    rgba(255, 214, 51, 0)    100%
  );
  pointer-events: none;
}
.artworks-header .artworks-hero { pointer-events: all; }

/* ── ARTWORKS WRAP — scroll container ───────────────────────── */
.artworks-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.artworks-wrap::-webkit-scrollbar { display: none; }

/* ── HERO ────────────────────────────────────────────────────── */
.artworks-hero-title {
  font-family: var(--font-slab);
  font-weight: 900;
  /* Reduced from clamp(4.5rem, 11vw, 13rem) — 13rem (208px) on wide
     screens was overpowering the rest of the hero. */
  font-size: clamp(3.2rem, 7vw, 7.5rem);
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: #0a1929;
  margin: 0 0 18px 0;
}

.artworks-title-block {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border: 2px solid rgba(10, 25, 60, 0.45);
  border-radius: 16px;
  padding: 13px 30px;
}
.atb-item {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10, 25, 60, 0.85);
}
.atb-div {
  color: rgba(10, 25, 60, 0.40);
  font-size: 0.78rem;
  font-weight: 700;
}
.atb-link {
  text-decoration: none;
  color: rgba(10, 25, 60, 0.85);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.atb-link:hover { border-bottom-color: rgba(10, 25, 60, 0.50); }
.artworks-intro {
  max-width: 58ch;
  margin: 18px 0 0;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10, 25, 60, 0.78);
}

/* ── VERTICAL MARQUEE GRID ───────────────────────────────────── */
.artworks-grid {
  display: flex;
  gap: 96px;
  padding: 0 48px;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Bottom gradient fade */
.artworks-grid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: linear-gradient(to top, rgba(255, 214, 51, 0.50), transparent);
  pointer-events: none;
  z-index: 5;
}

/* Keep the CRT treatment without fogging the artwork itself. */
body.page-artworks .page-vignette {
  background: radial-gradient(ellipse at center, transparent 72%, rgba(0,0,0,.14) 100%);
}

/* Static grid — tablet + mobile */
.artworks-grid.is-static {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr — see the note on the mobile rule
     below and on .rl-player-info in reel.css (2026-08-16). A bare 1fr
     track still respects each item's min-content width, so a future
     long, non-wrapping label in a card could balloon every column past
     the viewport independently of anything actually overflowing
     visually. No card currently has that kind of label, but the
     grid shrinks to fit either way at zero visual cost today. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  height: auto;
  overflow: visible;
  padding: 0 48px 80px;
}
.artworks-grid.is-static::after { display: none; }

@media (max-width: 1200px) and (min-width: 769px) {
  .artworks-grid.is-static {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Each column */
.marquee-col {
  flex: 1;
  min-width: 0;
  overflow: clip;
  height: 100%;
}

/* Scrolling track */
.marquee-col-track {
  display: flex;
  flex-direction: column;
  animation: colScrollUp var(--col-dur, 25s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.marquee-col:hover .marquee-col-track,
.marquee-col:focus-within .marquee-col-track {
  animation-play-state: paused;
}

@keyframes colScrollUp {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

/* ── CARD ────────────────────────────────────────────────────── */
.artwork-card {
  cursor: none;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 64px;
}

/* Portrait 7:10 via padding-bottom trick */
.artwork-img-wrap {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  height: 0;
  padding-bottom: 142.86%;
}

.artwork-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .artwork-card:hover .artwork-img { transform: scale(1.04); }
}

/* Dark hover overlay */
.artwork-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.80);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}
@media (hover: hover) {
  .artwork-card:hover .artwork-hover-overlay { opacity: 1; }
}
@media (pointer: coarse) {
  .artwork-hover-overlay { display: none; }
}

.ahov-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  line-height: 1.1;
}
.ahov-meta {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  letter-spacing: 0.04em;
}
.ahov-view {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  margin-top: 4px;
}

/* Status badge */
.artwork-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  pointer-events: none;
}
.artwork-status-badge.is-available {
  background: rgba(255, 255, 255, 0.95);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.30);
}
.artwork-status-badge.is-sold {
  background: rgba(0, 0, 0, 0.90);
  color: #fff;
}
@media (max-width: 600px) {
  .artwork-status-badge { font-size: 0.52rem; padding: 4px 6px; }
}

/* Corner bracket marks */
.artwork-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.corner {
  position: absolute;
  width: 10px;
  height: 10px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.5;
}
.corner.tl { top: 8px; left: 8px; border-top: 1px solid rgba(255,255,255,0.75); border-left: 1px solid rgba(255,255,255,0.75); }
.corner.tr { top: 8px; right: 8px; border-top: 1px solid rgba(255,255,255,0.75); border-right: 1px solid rgba(255,255,255,0.75); }
.corner.bl { bottom: 8px; left: 8px; border-bottom: 1px solid rgba(255,255,255,0.75); border-left: 1px solid rgba(255,255,255,0.75); }
.corner.br { bottom: 8px; right: 8px; border-bottom: 1px solid rgba(255,255,255,0.75); border-right: 1px solid rgba(255,255,255,0.75); }
.artwork-card:hover .corner { width: 16px; height: 16px; opacity: 1; }

/* Legacy class — hidden in case old JS cache serves it */
.artwork-overlay { display: none !important; }

/* Card ref strip — no year */
.artwork-meta {
  padding-top: 5px;
  /* the ref now carries its own box, so the old full-width rule above it
     would read as a second, competing frame */
  border-top: none;
}
.artwork-ref {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* Boxed to match the active nav link's "you are here" chip. Same 2px
     border, 6px radius and border colour token; padding is scaled down
     from the nav's 6px/12px because this type is ~8px against the nav's
     ~11px, and inline-block is needed for the box to take padding. */
  display: inline-block;
  color: #0a1929;
  border: 2px solid rgba(10, 25, 41, 0.38);
  border-radius: 6px;
  padding: 4px 9px;
}

/* ── LIGHTBOX BACKGROUND CANVAS ─────────────────────────────── */
.lightbox-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* ── LIGHTBOX ────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(8, 22, 88, 0.96);
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.40s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.40s;
  backdrop-filter: blur(10px);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox[aria-hidden="true"] { pointer-events: none; }
.lightbox[aria-hidden="false"] { pointer-events: all; }

/* Hide nav bar when lightbox is open */
body.lb-open .site-nav { opacity: 0; pointer-events: none; }

/* Lightbox title row — block on desktop, flex on mobile */
.lightbox-title-row {
  display: block;
}

/* Lightbox nav — fixed at viewport edges on desktop */
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: none;
  display: flex;
  align-items: center;
  padding: 8px;
  transition: opacity 0.25s;
  z-index: 9960;
}
.lb-nav.is-hidden { visibility: hidden; }
.lb-nav--prev { left: 64px; }
.lb-nav--next { right: 64px; }

.lb-nav-arrow {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.80);
  transition: color 0.25s, transform 0.25s;
  line-height: 1;
}
.lb-nav--prev:hover .lb-nav-arrow { color: #fff; transform: translateX(-4px); }
.lb-nav--next:hover .lb-nav-arrow { color: #fff; transform: translateX(4px); }

.lightbox-close {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.32);
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  color: rgba(255, 255, 255, 0.85);
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  cursor: none;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox-close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.55);
}

/* Desktop: close button must sit above the CRT frame (9950) */
@media (min-width: 769px) {
  .lightbox-close {
    position: fixed;
    top: 52px;
    right: 60px;
    z-index: 9960;
  }
}

.lightbox-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 0 80px;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  position: relative;
  z-index: 2;
}

.lightbox-img-wrap {
  position: relative;
  flex-shrink: 0;
  height: 80vh;
  aspect-ratio: 7 / 10;
}
.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lightbox corners */
.lightbox-corners {
  position: absolute;
  inset: -10px;
  pointer-events: none;
}
.lc {
  position: absolute;
  width: 22px;
  height: 22px;
}
.lc.tl { top: 0; left: 0; border-top: 1px solid rgba(255,255,255,0.45); border-left: 1px solid rgba(255,255,255,0.45); }
.lc.tr { top: 0; right: 0; border-top: 1px solid rgba(255,255,255,0.45); border-right: 1px solid rgba(255,255,255,0.45); }
.lc.bl { bottom: 0; left: 0; border-bottom: 1px solid rgba(255,255,255,0.45); border-left: 1px solid rgba(255,255,255,0.45); }
.lc.br { bottom: 0; right: 0; border-bottom: 1px solid rgba(255,255,255,0.45); border-right: 1px solid rgba(255,255,255,0.45); }

/* Lightbox panel */
.lightbox-panel {
  flex: 1;
  min-width: 0;
}
.lightbox-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  padding-left: 52px;
}
.lightbox-ref {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}
.lightbox-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 4.5rem);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.lightbox-medium {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.50);
  margin: 0;
}
.lightbox-dimensions {
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.50);
  text-align: left;
  margin: 0;
  line-height: 1.6;
}

.lightbox-rule {
  width: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.lightbox-buy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #fff;
  padding: 14px 28px;
  text-decoration: none;
  border-radius: 1px;
  align-self: flex-start;
  transition: background 0.25s, color 0.25s;
}
.lightbox-buy:hover:not(.is-sold) { background: rgba(255, 255, 255, 0.88); }
.lightbox-buy.is-sold {
  background: #6b7280;
  color: #fff;
  cursor: not-allowed;
}
.buy-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox-buy:hover .buy-arrow { transform: translate(3px, -3px); }

/* ── MULTI-IMAGE COUNTER ─────────────────────────────────────── */
.lb-img-counter {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: none;
  background: rgba(0, 0, 0, 0.50);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── MULTI-IMAGE DOTS ────────────────────────────────────────── */
.lb-img-dots {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
}
.lb-img-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
  flex-shrink: 0;
  display: block;
  cursor: pointer;
}
.lb-img-dot.is-active {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(255, 255, 255, 0.90);
  transform: scale(1.15);
}

/* Image wrap shows pointer when multi-image */
.lightbox-img-wrap.is-multi { cursor: pointer; }

/* ── FOOTER ENTRANCE ANIMATION ──────────────────────────────── */
.footer-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  /* Push header below nav — align left/right with nav edges (28px) */
  .artworks-header {
    /* Was 76px top — mobile nav ends ~68px, leaving only 8px clearance. */
    padding: 100px 28px 40px;
  }
  .artworks-hero-title {
    font-size: clamp(3rem, 14vw, 5rem);
    margin-bottom: 14px;
    color: #fff;
    text-align: center;
  }
  .artworks-title-block {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border-color: rgba(255, 255, 255, 0.45);
  }
  .atb-item {
    color: rgba(255, 255, 255, 0.85);
  }
  .atb-link {
    color: rgba(255, 255, 255, 0.85);
  }
  .atb-link:hover { border-bottom-color: rgba(255, 255, 255, 0.50); }
  .atb-div {
    color: rgba(255, 255, 255, 0.40);
  }
  .artworks-intro {
    margin: 16px auto 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
  }

  /* Mobile: static grid, clears header */
  .artworks-grid {
    padding: 0 20px;
    height: 100vh;
    gap: 8px;
  }
  .artworks-grid.is-static {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 20px 60px;
    height: auto;
  }
  .artworks-grid.is-static .artwork-card {
    margin-bottom: 0;
    gap: 2px;
  }
  .artworks-grid.is-static .artwork-meta {
    padding-top: 0;
    padding-bottom: 10px;
  }
  .artwork-ref {
    /* Keeps the dark chip from desktop. The old rule here made the ref
       white, which is near-invisible on this page's yellow — and there is
       no nav chip to match on mobile anyway, since .nav-links is hidden
       behind the burger below 768px. Only the padding scales down. */
    padding: 3px 7px;
  }

  /* Mobile lightbox nav — flanks the title */
  .lightbox-title-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }
  .lb-nav {
    position: static;
    top: auto;
    transform: none;
    flex-shrink: 0;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lb-nav--prev { left: auto; }
  .lb-nav--next { right: auto; }
  .lightbox-title-row .lightbox-title {
    flex: 1;
    text-align: center;
    padding: 0 8px;
  }
  .lb-nav-arrow { font-size: 2rem; }

  /* Artworks hero title — slightly bigger relative to body copy on
     mobile, scaled down to match the reduced desktop size above */
  .artworks-hero-title { font-size: clamp(2.8rem, 13vw, 4.6rem); }

  /* Artworks header — no box, items flush to nav edges */
  .artworks-title-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .atb-item:last-child { text-align: right; }
  .atb-div { display: none; }

  /* Lightbox mobile — full block pinned 64px from top and bottom */
  .lightbox-inner {
    position: absolute;
    top: 64px;
    bottom: 64px;
    left: 24px;
    right: 24px;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
  }
  .lightbox-img-wrap {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    padding-bottom: 0;
    overflow: visible;
  }
  .lightbox-corners {
    inset: 0;
  }
  .lb-img-dots {
    bottom: -32px;
  }
  .lb-img-counter {
    position: fixed;
    top: 56px;
    left: 32px;
    right: auto;
    transform: translateY(-50%);
  }
  .lightbox-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .lightbox-panel {
    flex: 0 0 auto;
    width: 100%;
    padding-bottom: 0;
  }
  .lightbox-panel-inner {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 20px;
    margin-top: 16px;
    gap: 10px;
    align-items: center;
    text-align: center;
  }
  .lightbox-buy { align-self: center; }
}

@media (max-width: 420px) {
  .artworks-grid.is-static { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}