.collector-gallery {
  --collector-progress: 1;
  --collector-cream: #eee2c9;
  --collector-gold: #b89a63;
  position: relative;
  padding: 32px 6vw 90px;
  color: var(--collector-cream);
  background: radial-gradient(ellipse at 50% 65%, #44382b 0, #241f1a 56%, #201c18 100%);
  isolation: isolate;
}

.collector-gallery .collector-line {
  color: #dfcaa285;
  border-color: #d6b77f38;
}

.collector-gallery .collector-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin: 68px 0 50px;
}

.collector-gallery .collector-kicker {
  margin-bottom: 24px;
  font: 11px/1.7 var(--sans);
  letter-spacing: 2px;
  color: #cbb68d;
}

.collector-gallery .collector-heading h2 {
  font-size: clamp(34px, 4.2vw, 66px);
  line-height: 1.4;
}

.collector-gallery .collector-heading h2 em { color: #c7aa76; }

.collector-gallery .collector-heading > p {
  padding-bottom: 8px;
  font: 14px/2 var(--serif);
  color: #c9bdab;
}

.collector-gallery .collector-journey { perspective: 1500px; }
.collector-gallery .collector-stage { position: relative; margin: 0 auto; max-width: 1450px; }

.collector-gallery .collector-frame {
  position: relative;
  padding: clamp(6px, .85vw, 13px);
  background: linear-gradient(135deg, #8b7147, #30291f 34%, #b79a5e 58%, #4e3e29 88%);
  border: 1px solid #baa27180;
  box-shadow: 0 3px 0 #120f0b, 0 25px 60px #0005;
  transform: scale(calc(.94 + var(--collector-progress) * .06)) rotateX(calc((1 - var(--collector-progress)) * 1.1deg));
  transform-origin: center center;
}

.collector-gallery .collector-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #edcf9140;
  pointer-events: none;
}

.collector-gallery .collector-picture {
  position: relative;
  border: 1px solid #140e07;
  background: #302a20;
  isolation: isolate;
}

.collector-gallery .collector-panorama {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(calc(.88 + var(--collector-progress) * .12));
}

.collector-gallery .collector-light {
  position: absolute;
  inset: 0;
  opacity: calc(.1 + var(--collector-progress) * .45);
  background: radial-gradient(ellipse at calc(16% + var(--collector-progress) * 48%) 30%, #ffd89927, transparent 62%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.collector-gallery .collector-hotspots { position: absolute; inset: 0; }
.collector-gallery [hidden] { display: none !important; }

.collector-gallery .collector-hotspot {
  position: absolute;
  left: var(--point-x);
  top: var(--point-y);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  transform: translate(-50%, -50%);
}

.collector-gallery .collector-hotspot span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #efdec0b8;
  border-radius: 50%;
  color: #fff0d2;
  background: #211c16b8;
  box-shadow: 0 0 0 4px #e7c48d12, 0 2px 12px #0005;
  font: italic 11px Georgia, serif;
  transition: background .2s, box-shadow .2s;
}

.collector-gallery .collector-hotspot:is(:hover, :focus-visible) span {
  color: #2e2518;
  background: #e2c79b;
  box-shadow: 0 0 0 6px #e7c48d30;
}

.collector-gallery .collector-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 4px 0;
  font: 10px/1.8 var(--sans);
  letter-spacing: .6px;
  color: #c4b395;
}

.collector-gallery .collector-explore {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: center;
  margin-top: 54px;
  padding-top: 34px;
  border-top: 1px solid #d6b77f38;
}

.collector-gallery .collector-explore > p { font: clamp(21px, 2vw, 29px)/1.65 var(--serif); }
.collector-gallery .collector-explore > p em { color: #c7aa76; font-style: normal; }
.collector-gallery .collector-explore > p small { display: block; margin-top: 12px; font: 11px/1.8 var(--sans); color: #b9aa92; }
.collector-gallery .collector-detail-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }

.collector-gallery .collector-detail-index button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid #d6b77f38;
  color: #e6d6b9;
  background: transparent;
  text-align: left;
  font: 15px/1.6 var(--serif);
}

.collector-gallery .collector-detail-index button > span { color: #a78d63; font: italic 12px Georgia, serif; }
.collector-gallery .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.collector-gallery .collector-detail-index .icon { margin-left: auto; width: 13px; height: 13px; }

.collector-gallery .collector-dialog {
  position: fixed;
  inset: 0;
  width: min(1120px, calc(100vw - 36px));
  max-width: none;
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 0 24px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  color: #e9dcc3;
  background: #282219;
  border: 1px solid #b4935d80;
  box-shadow: 0 35px 100px #0008;
}

.collector-gallery .collector-dialog:not([open]) { display: none; }
.collector-gallery .collector-dialog::backdrop { background: #100d09d9; }
.collector-gallery .collector-dialog.is-fallback { z-index: 1000; box-shadow: 0 0 0 100vmax #100d09e8; }

.collector-gallery .collector-dialog-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  background: #282219;
  font: 10px/1.7 var(--sans);
  letter-spacing: 1px;
  color: #c7ad81;
}

.collector-gallery .collector-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; background: transparent; }
.collector-gallery .collector-close .icon { width: 20px; height: 20px; }
.collector-gallery .collector-dialog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 218px; gap: 26px; align-items: center; }
.collector-gallery .collector-detail-viewport { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #17140f; border: 1px solid #baa27155; }

.collector-gallery .collector-detail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(var(--detail-x, 0%), var(--detail-y, 0%)) scale(var(--detail-zoom, 1));
  transform-origin: center;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}

.collector-gallery .collector-detail-number { display: block; margin-bottom: 18px; color: #b59a6d; font: italic 13px Georgia, serif; }
.collector-gallery .collector-detail-notes h3 { font: 29px/1.4 var(--serif); }
.collector-gallery .collector-detail-notes > p { margin-top: 15px; font: 14px/1.9 var(--serif); color: #c5baa5; }
.collector-gallery .collector-detail-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 30px; }

.collector-gallery .collector-detail-switcher button {
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid #b5975f50;
  color: #c9b998;
  background: transparent;
  font: 12px/1.5 var(--serif);
}

.collector-gallery .collector-detail-switcher button[aria-pressed="true"] { color: #271f14; background: #cfb88c; border-color: #cfb88c; }
.collector-gallery .collector-reset { display: flex; justify-content: space-between; align-items: center; gap: 15px; width: 100%; min-height: 48px; padding: 13px 0; margin-top: 12px; border: 0; border-bottom: 1px solid #b5975f50; background: transparent; font: 12px/1.7 var(--serif); }

@media (min-width: 1000px) and (min-height: 850px) {
  .collector-gallery .collector-journey { min-height: calc(100svh + 100px); }
  .collector-gallery .collector-stage { position: sticky; top: 100px; max-width: min(1450px, calc((100svh - 210px) * 4 / 3)); }
}

@media (max-width: 900px) {
  .collector-gallery .collector-heading { flex-direction: column; align-items: start; gap: 25px; }
  .collector-gallery .collector-explore { grid-template-columns: 1fr; gap: 25px; }
  .collector-gallery .collector-dialog-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .collector-gallery .collector-detail-number { margin-bottom: 10px; }
  .collector-gallery .collector-detail-switcher { grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
  .collector-gallery .collector-dialog { width: min(700px, calc(100vw - 32px)); }
}

@media (max-width: 600px) {
  .collector-gallery { padding: 28px 23px 55px; }
  .collector-gallery .collector-heading { margin: 42px 0 32px; }
  .collector-gallery .collector-kicker { margin-bottom: 18px; font-size: 9px; letter-spacing: 1.5px; }
  .collector-gallery .collector-heading h2 { font-size: clamp(29px, 7.8vw, 42px); }
  .collector-gallery .collector-heading > p { font-size: 13px; }
  .collector-gallery .collector-frame { padding: 5px; }
  .collector-gallery .collector-caption { padding-top: 18px; font-size: 9px; gap: 9px; }
  .collector-gallery .collector-caption > span:last-child { max-width: 136px; text-align: right; }
  .collector-gallery .collector-explore { margin-top: 30px; padding-top: 25px; }
  .collector-gallery .collector-explore > p em { display: block; }
  .collector-gallery .collector-detail-index { gap: 0 22px; }
  .collector-gallery .collector-detail-index button { font-size: 14px; gap: 10px; }
  .collector-gallery .collector-dialog { width: calc(100vw - 24px); padding: 0 14px 18px; max-height: calc(100dvh - 24px); }
  .collector-gallery .collector-dialog-bar { min-height: 56px; font-size: 8px; letter-spacing: .6px; }
  .collector-gallery .collector-dialog-layout { gap: 20px; }
  .collector-gallery .collector-detail-notes h3 { font-size: 25px; }
  .collector-gallery .collector-detail-notes > p { margin-top: 10px; font-size: 13px; }
  .collector-gallery .collector-detail-switcher { gap: 5px; margin-top: 18px; }
  .collector-gallery .collector-detail-switcher button { font-size: 11px; }
}

body.no-motion .collector-gallery .collector-journey { min-height: 0; }
body.no-motion .collector-gallery .collector-stage { position: relative; top: auto; }
body.no-motion .collector-gallery .collector-frame { transform: none; }
body.no-motion .collector-gallery .collector-panorama { filter: none; }
body.no-motion .collector-gallery .collector-light { display: none; }
body.no-motion .collector-gallery .collector-detail-image { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-override-on) .collector-gallery .collector-journey{ min-height: 0; }
  html:not(.motion-override-on) .collector-gallery .collector-stage{ position: relative; top: auto; }
  html:not(.motion-override-on) .collector-gallery .collector-frame{ transform: none; }
  html:not(.motion-override-on) .collector-gallery .collector-panorama{ filter: none; }
  html:not(.motion-override-on) .collector-gallery .collector-light{ display: none; }
  html:not(.motion-override-on) .collector-gallery .collector-detail-image{ transition: none; }
}