/* Artwork shelves and large viewer; scoped to this gallery. */
.frost-gallery { margin: clamp(56px, 8vw, 94px) 0 28px; }
.gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--black);
}
#main .gallery-heading h2 {
  margin: 8px 0;
  color: var(--black);
  font: italic 1000 clamp(43px, 9vw, 108px)/.88 system-ui,sans-serif;
  letter-spacing: -.08em;
  transform: skewX(-7deg);
  transform-origin: left center;
}
.gallery-heading h2 span { color: var(--red); }
#main .gallery-heading p { margin: 10px 0 0; color: var(--black); font-size: 14px; }
.gallery-count {
  align-self: center;
  white-space: nowrap;
  padding: 8px;
  background: var(--black);
  color: var(--paper);
  box-shadow: 4px 4px var(--red);
  font: 900 16px/1 monospace;
  transform: rotate(-4deg);
}
.gallery-count small { font-size: 9px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(12px, 2.8vw, 32px); }
#main .gallery-tile {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 0;
  border: 3px solid var(--black);
  background: var(--paper);
  color: var(--black);
  text-align: left;
  box-shadow: 4px 4px var(--red);
  touch-action: manipulation;
}
#main .gallery-tile:is(:hover,:active) { scale: 1; box-shadow: 6px 6px var(--red); }
.gallery-art {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--paper);
}
.gallery-art-placeholder {
  background:
    radial-gradient(circle at 2px 2px,#f5f1e843 1px,transparent 1.5px) top right / 7px 7px,
    linear-gradient(155deg,var(--black) 0 65%,var(--red) 65% 91%,var(--black) 91%);
}
.gallery-art-art.gallery-art-placeholder {
  background:
    radial-gradient(circle at 2px 2px,#11111232 1px,transparent 1.7px) top left / 6px 6px,
    linear-gradient(155deg,var(--paper) 0 75%,var(--red) 75% 87%,var(--paper) 87%);
  color: var(--black);
}
.gallery-art-design.gallery-art-placeholder {
  background: repeating-linear-gradient(145deg,#11111235 0 2px,transparent 2px 10px),linear-gradient(155deg,var(--red) 0 71%,var(--black) 71% 92%,var(--red) 92%);
}
.gallery-art > svg { width: 68%; max-height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; }
.gallery-art svg .gallery-mark-fill { fill: currentColor; stroke: none; }
.gallery-art svg .gallery-art-corners { opacity: .68; stroke-width: 1.5; }
.gallery-art > img,.gallery-art > video { display: block; width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: cover; }
.gallery-index-stamp {
  position: absolute;
  right: 6%;
  bottom: 7%;
  padding: 4px 7px;
  border: 1px solid var(--paper);
  background: var(--black);
  color: var(--paper);
  font: 800 11px/1 monospace;
  transform: skewX(-10deg);
}
.gallery-tile-meta {
  display: grid;
  gap: 4px;
  padding: 10px clamp(20px, 4vw, 42px) 13px 10px;
  border-top: 3px solid var(--black);
}
.gallery-category { color: var(--red); font: 900 10px/1.3 monospace; letter-spacing: .13em; }
.gallery-item-title { font: 850 clamp(13px, 2vw, 21px)/1.35 system-ui,sans-serif; overflow-wrap: anywhere; }
.gallery-summary { font: 500 12px/1.5 system-ui,sans-serif; overflow-wrap: anywhere; }
.gallery-open-mark { position: absolute; right: 7px; bottom: 7px; font: 900 17px/1 system-ui,sans-serif; }

#frost-gallery-view {
  width: min(760px, calc(100% - 30px));
  max-width: none;
  max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  border: 3px solid var(--paper);
  background: var(--black);
  color: var(--paper);
  box-shadow: 7px 7px 0 var(--red);
}
#frost-gallery-view::backdrop { background: #111112dc; }
.gallery-view-head,.gallery-view-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  font: 900 12px/1.25 monospace;
  letter-spacing: .1em;
}
.gallery-view-category { color: #ff7186; }
.gallery-view button {
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--black);
  font: 900 24px/1 system-ui,sans-serif;
  touch-action: manipulation;
}
.gallery-view-stage {
  margin: 0 12px;
  border: 2px solid var(--paper);
  touch-action: pan-y pinch-zoom;
  user-select: none;
}
.gallery-view-stage .gallery-art { height: min(50dvh, 450px); aspect-ratio: auto; }
.gallery-view-stage .gallery-art :is(img,video) { object-fit: contain; }
.gallery-view-copy { padding: 10px 12px 7px; }
#frost-gallery-view .gallery-view-copy h2 { margin: 0 0 4px; color: var(--paper); font: 900 19px/1.3 system-ui,sans-serif; }
#frost-gallery-view .gallery-view-copy p { margin: 0; color: var(--paper); font: 500 13px/1.5 system-ui,sans-serif; }
.gallery-view-nav { border-top: 1px solid #f5f1e860; text-align: center; }
.gallery-view-nav small { display: block; margin-top: 2px; font: 650 11px/1.2 system-ui,sans-serif; letter-spacing: 0; }
.gallery-view-status { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:600px) {
  .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery-heading .kicker { font-size: 9px; }
  .gallery-tile-meta { padding-right: 21px; }
}