/* ---------- gallery: pieces strung along a winding path you travel down ---------- */
.wipe { position: fixed; inset: 0; z-index: 20; background: #0B0B0B; pointer-events: none; animation: wipe 1s cubic-bezier(.8, 0, .1, 1) .15s both; }
@keyframes wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }

body.gallery { background: var(--red); color: #F2EFE8; }
.gal { position: fixed; inset: 0 0 var(--bar) 0; overflow: hidden; background: var(--red); perspective: 900px; perspective-origin: 50% 46%; cursor: grab; user-select: none; -webkit-user-select: none; }
.gal.is-dragging { cursor: grabbing; }
.gal::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(#0B0B0B .8px, transparent 1.2px); background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(60vw 50vh at 70% 80%, #000 30%, transparent 70%), radial-gradient(50vw 40vh at 15% 30%, #000 20%, transparent 70%);
  mask-image: radial-gradient(60vw 50vh at 70% 80%, #000 30%, transparent 70%), radial-gradient(50vw 40vh at 15% 30%, #000 20%, transparent 70%); }
.gal__world { position: absolute; inset: 0; transform-style: preserve-3d; }
.gal__item { position: absolute; left: 50%; top: 46%; height: var(--ih); margin: calc(var(--ih) / -2) 0 0 calc(var(--iw) / -2); width: var(--iw); will-change: transform, opacity; cursor: zoom-in; }
.gal__item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  filter: grayscale(1) contrast(1.2) brightness(1.35); mix-blend-mode: multiply; transition: filter .6s; }
/* far pieces are black-on-red; the one in front of you shows in full */
.gal__item.on img { filter: none; mix-blend-mode: normal; }
.gal__item i { position: absolute; width: 3px; height: 3px; background: #F2EFE8; opacity: 0; transition: opacity .4s; }
.gal__item.on i { opacity: .8; }
.gal__item i:nth-of-type(1) { left: -12px; top: -12px; } .gal__item i:nth-of-type(2) { right: -12px; top: -12px; }
.gal__item i:nth-of-type(3) { left: -12px; bottom: -12px; } .gal__item i:nth-of-type(4) { right: -12px; bottom: -12px; }

/* map + list */
.gmap { position: fixed; left: var(--pad); top: var(--pad); width: 22vw; min-width: 190px; z-index: 5; pointer-events: none; }
.gmap__box { height: 13vh; background: repeating-linear-gradient(115deg, transparent 0 5px, rgba(11, 11, 11, .16) 5px 6px); }
.gmap__box svg { width: 100%; height: 100%; display: block; color: #0B0B0B; } #mapDot { fill: #F2EFE8; }
.gmap__list { margin-top: 14px; list-style: none; }
.gmap__list li { display: flex; gap: 10px; padding: 1.5px 0; color: #0B0B0B; opacity: .55; transition: opacity .3s, color .3s; }
.gmap__list li.on { opacity: 1; color: #F2EFE8; background: #0B0B0B; padding-left: 5px; }
.gmap__list li span:first-child { width: 2.4em; }

.gal__tr, .gal__bl { position: fixed; z-index: 5; pointer-events: none; }
.gal__tr { right: var(--pad); top: var(--pad); text-align: right; }
.gal__bl { left: var(--pad); bottom: calc(var(--bar) + 12px); color: #0B0B0B; }
.gal__cap { position: fixed; z-index: 5; left: 0; right: 0; bottom: calc(var(--bar) + 14px); text-align: center; pointer-events: none; }
.gal__cap h2 { font: 700 clamp(22px, 3.6vw, 46px)/1 var(--sans); letter-spacing: -.03em; margin: 4px 0; }
.gal__cap p:first-child { color: #0B0B0B; }

/* full view */
.gbox { position: fixed; inset: 0 0 var(--bar) 0; z-index: 8; display: grid; place-items: center; background: rgba(11, 11, 11, .95); opacity: 0; pointer-events: none; transition: opacity .45s; cursor: zoom-out; }
.gbox.on { opacity: 1; pointer-events: auto; }
.gbox img { max-width: 92vw; max-height: calc(100vh - var(--bar) - 90px); transform: scale(.94); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.gbox.on img { transform: none; }
.gbox p { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; }

.bar a.bar__cta { display: flex; align-items: center; }

@media (max-width: 760px) {
  .gmap { width: 46vw; min-width: 0; } .gmap__box { height: 8vh; } .gmap__list { display: none; }
  .gal__bl { display: none; }
}