/* =====================================================================
   gallery.css — the Gallery wall, framed paintings, salon hang and the
   viewing room (enlarge). Also used by /artists and /artists/<slug>.
   ===================================================================== */

/* ---------------------------------------------------------------- frame
   A thin dark floater frame around a 3:2 painting on canvas. Lit from
   above: soft cast shadow below, a faint inner shadow on the canvas. */
.frame {
  --fw: clamp(4px, 0.42vw + 2px, 9px);
  position: relative;
  display: block;
  width: 100%;
  padding: var(--fw);
  border: 0;
  border-radius: 1px;
  background: linear-gradient(165deg, #34312d 0%, #191816 38%, #121110 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(18, 18, 17, 0.22),
    0 22px 36px -20px rgba(18, 18, 17, 0.5);
  cursor: zoom-in;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.frame__well {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--oat);
}
/* the frame's lip shading the canvas edge */
.frame__well::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 3px 7px rgba(0, 0, 0, 0.32);
}
.frame__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* garment underneath (revealed on hover): mockup multiplied onto a wall tone */
.frame__garment {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: #efe9df;
  isolation: isolate;
  opacity: 0;
  transition: opacity 0.65s var(--ease);
}
.frame__garment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  mix-blend-mode: multiply;
  transform: scale(1.06);
  transition: transform 1.1s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .frame:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 3px rgba(18, 18, 17, 0.2), 0 34px 52px -24px rgba(18, 18, 17, 0.55); }
  .frame:hover .frame__garment { opacity: 1; }
  .frame:hover .frame__garment img { transform: scale(1); }
}
.frame:focus-visible { outline-offset: 5px; }

/* ---------------------------------------------------------------- page head */
.gallery__head {
  position: relative;
  z-index: 1;
  padding-top: clamp(1.75rem, 1rem + 4vw, 5.5rem);
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
  display: grid;
  gap: var(--s-4);
}
.gallery__title { font-size: var(--fs-3xl); }
.gallery__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.gallery__count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.gallery__intro { font-size: var(--fs-base); color: var(--ink-2); max-width: 30rem; text-wrap: balance; }
@media (min-width: 900px) {
  .gallery__head { grid-template-columns: 1fr auto; align-items: end; }
  .gallery__tools { gap: var(--s-6); }
}

/* ---------------------------------------------------------------- the wall
   Each work is a bay: the front painting hung large, the back painting
   smaller beside it, the wall label under the small one. Bays alternate. */
.wall { display: grid; gap: clamp(4.5rem, 3rem + 7vw, 11rem); padding-bottom: var(--s-6); }

.bay {
  --drift: 22px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  column-gap: var(--s-4);
  row-gap: var(--s-4);
  align-items: end;
}
.bay__front { grid-column: 1 / -1; }
.bay__back { grid-column: 1; grid-row: 2; }
.bay__label { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: 2px; }
.bay:nth-child(even) { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.bay:nth-child(even) .bay__back { grid-column: 2; }
.bay:nth-child(even) .bay__label { grid-column: 1; }

/* gallery light: a soft pool of warm light on the wall above each bay */
.bay::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -10%;
  right: -10%;
  top: -10%;
  height: 90%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 253, 248, 0.9), rgba(255, 253, 248, 0.45) 55%, rgba(255, 253, 248, 0));
}
.gallery__wall { position: relative; isolation: isolate; overflow-x: clip; }

.bay__label .wall-label__title a,
.works-grid__item .wall-label__title a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.bay__label .wall-label__title a:hover,
.works-grid__item .wall-label__title a:hover { background-size: 100% 1px; }
.wall-label__title { margin: 0; font-weight: 400; }

@media (min-width: 900px) {
  .bay {
    --drift: 56px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 2.5rem);
    row-gap: var(--s-5);
    align-items: start;
  }
  .bay__front { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .bay__back { grid-column: 9 / span 4; grid-row: 1; margin-top: clamp(3rem, 9vw, 9rem); }
  .bay__label { grid-column: 9 / span 4; grid-row: 2; align-self: start; padding: 0; }
  .bay:nth-child(even) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bay:nth-child(even) .bay__front { grid-column: 6 / span 7; }
  .bay:nth-child(even) .bay__back { grid-column: 1 / span 4; margin-top: clamp(1.5rem, 4vw, 4rem); }
  .bay:nth-child(even) .bay__label { grid-column: 1 / span 4; }
  .bay::before { left: 0; right: 0; top: -12%; height: 100%; }
  .wall-label { font-size: var(--fs-sm); }
  .bay__label .wall-label__title { font-size: var(--fs-lg); }
}
@media (min-width: 1500px) {
  .bay__front { grid-column: 1 / span 7; }
}

/* Filtering: bays fade out, then collapse. */
.bay.is-filtered-out { display: none; }
.bay.is-leaving { opacity: 0; transition: opacity 0.3s var(--ease); }

/* ---------------------------------------------------------------- scroll-linked depth
   The back painting drifts a little against the front as you scroll, and
   each painting settles into its frame. Compositor-only, follows the
   scroll 1:1 (never runs on its own). Browsers without scroll timelines
   get the plain rise-in. */
@supports (animation-timeline: view()) {
  .bay__back .frame {
    animation: gal-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .frame__art {
    animation: gal-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
}
@keyframes gal-drift { from { translate: 0 var(--drift); } to { translate: 0 calc(var(--drift) * -1); } }
@keyframes gal-settle { from { scale: 1.07; } to { scale: 1; } }

/* ---------------------------------------------------------------- salon hang
   Up to 8 works: one large with two stacked beside it, then two, then three. */
.salon {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 0.6rem + 1.2vw, 30px);
  align-items: start;
}
.salon__item--xl { grid-column: span 4; grid-row: span 2; }
.salon__item--s { grid-column: span 2; }
.salon__item--m { grid-column: span 3; }
.salon__item--xs { grid-column: span 2; }
.frame--salon { --fw: clamp(3px, 0.3vw + 1px, 7px); }

/* =====================================================================
   VIEWING ROOM — enlarge a work: the painting with the garment beside it.
   ===================================================================== */
.vr {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ivory);
  color: var(--ink);
  overflow: hidden auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.38s var(--ease);
}
.vr.is-open { opacity: 1; }
.vr::backdrop { background: transparent; }
.vr[open] { display: flex; flex-direction: column; }

.vr__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--header-h);
  padding: 0 calc(var(--gutter) - 10px);
  background: color-mix(in srgb, var(--ivory) 92%, transparent);
}
.vr__nav { display: flex; align-items: center; gap: 2px; }
.vr__count { min-width: 3.6em; text-align: center; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.vr__close { font-size: var(--fs-sm); font-weight: 500; gap: var(--s-2); width: auto; padding: 0 10px; display: inline-flex; align-items: center; }

.vr__stage {
  flex: 1;
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: var(--s-2) var(--gutter) max(var(--s-6), env(safe-area-inset-bottom));
  transition: opacity 0.22s var(--ease);
  touch-action: pan-y;
}
.vr__stage.is-swapping { opacity: 0; }

.vr__art { position: relative; }
.vr__art .frame { cursor: default; }
.vr__art .frame:hover { transform: none; }

.vr__side {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  grid-template-areas: 'g i' 'c c';
  gap: var(--s-4) var(--s-4);
  align-items: end;
}
.vr__gblock { grid-area: g; display: grid; gap: var(--s-1); }
.vr__garment { position: relative; aspect-ratio: 1; margin: 0; }
.vr__garment img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity 0.3s var(--ease); }
.vr__garment img.is-swapping { opacity: 0; }
.vr__gmeta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.vr__garment-name { font-size: var(--fs-xs); color: var(--muted); }
.vr__info { grid-area: i; display: grid; gap: var(--s-3); align-content: end; padding-bottom: var(--s-6); }
.vr__info .wall-label__title { font-size: var(--fs-lg); }
.vr__cta { grid-area: c; }

.vr__toggle { display: inline-flex; gap: var(--s-4); }
.vr__toggle button {
  min-height: 44px; padding: 0; border: 0; background: none;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
  background-image: linear-gradient(currentColor, currentColor); background-position: 0 calc(100% - 10px); background-size: 0 1px; background-repeat: no-repeat;
  transition: color 0.25s, background-size 0.35s var(--ease);
}
.vr__toggle button[aria-pressed='true'] { color: var(--ink); background-size: 100% 1px; }
.vr__toggle button:hover { color: var(--ink); }
.vr__swatches { display: inline-flex; margin-right: -12px; }
.vr__swatch { display: inline-grid; place-items: center; width: 40px; height: 44px; padding: 0; border: 0; background: none; }
.vr__swatch::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--ivory), 0 0 0 4px transparent;
  transition: box-shadow 0.25s;
}
.vr__swatch[aria-pressed='true']::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--ivory), 0 0 0 4px var(--ink); }

@media (min-width: 900px) {
  .vr__stage {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: var(--s-7);
  }
  .vr__art .frame { width: min(100%, calc((100svh - var(--header-h) - 7rem) * 1.5)); margin-inline: auto; }
  .vr__side { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'g' 'i' 'c'; gap: var(--s-5); align-items: start; }
  .vr__gblock { width: min(100%, 44svh); }
  .vr__info { padding-bottom: 0; }
  .vr__cta { justify-self: stretch; }
}

/* the moving piece in a view transition (enlarge / close) */
::view-transition-group(vr-art) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
::view-transition-old(vr-art), ::view-transition-new(vr-art) { height: 100%; object-fit: cover; }

/* the filter's legend is visually hidden; base .chips > legend would stretch it */
.gallery-filter { position: relative; }
.gallery-filter > legend.visually-hidden { width: 1px; margin: -1px; }

/* keep the page width steady when the viewing room locks scrolling */
/* scrollbar-gutter: stable now lives in base.css */