:root {
  --paper: #f8f7f3;
  --white: #fff;
  --ink: #171615;
  --muted: #8d8982;
  --sold: #8f1e18;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

body {
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.catalogue,
.viewer {
  width: 100%;
  height: 100%;
}

.catalogue { position: relative; }

.viewer {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4.5vh, 4rem) clamp(4rem, 7vw, 8rem);
  outline: none;
  isolation: isolate;
}

.logo {
  position: fixed;
  z-index: 30;
  top: clamp(1rem, 2vw, 2rem);
  left: clamp(1rem, 2vw, 2rem);
  width: clamp(2.6rem, 3vw, 3.4rem);
  height: clamp(2.6rem, 3vw, 3.4rem);
  border-radius: 50%;
  opacity: .92;
  transition: opacity .25s ease, transform .4s var(--ease);
}

.logo:hover { opacity: 1; transform: scale(1.04); }
.logo img { display: block; width: 100%; height: 100%; }

.book {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(calc(100vw - clamp(8rem, 14vw, 16rem)), calc((100dvh - clamp(3rem, 9vh, 8rem)) * 2.828));
  aspect-ratio: 2.828 / 1;
  perspective: none;
  contain: layout paint;
}

.spread {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: opacity, transform;
}

.spread.is-cover .page {
  flex: 0 0 50%;
  max-width: 50%;
}

.page {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: #f4f1eb;
  box-shadow: 0 1.2rem 3rem rgba(33, 27, 20, .10), 0 .2rem .6rem rgba(33, 27, 20, .08);
}

.page.left::after,
.page.right::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 4.5%;
  pointer-events: none;
}

.page.left::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(28, 23, 18, .055));
}

.page.right::after {
  left: 0;
  background: linear-gradient(90deg, rgba(28, 23, 18, .07), transparent);
}

.page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity .25s ease;
}

.page.loading img { opacity: 0; }

.spread.exit-next { animation: exit-next .46s var(--ease) both; }
.spread.enter-next { animation: enter-next .54s var(--ease) both; }
.spread.exit-previous { animation: exit-previous .46s var(--ease) both; }
.spread.enter-previous { animation: enter-previous .54s var(--ease) both; }

@keyframes exit-next {
  to { opacity: 0; transform: translate3d(-14%, 0, 0) scale(.955); }
}

@keyframes enter-next {
  from { opacity: 0; transform: translate3d(14%, 0, 0) scale(.955); }
}

@keyframes exit-previous {
  to { opacity: 0; transform: translate3d(14%, 0, 0) scale(.955); }
}

@keyframes enter-previous {
  from { opacity: 0; transform: translate3d(-14%, 0, 0) scale(.955); }
}

.sold-mask {
  position: absolute;
  z-index: 5;
  left: 72.1%;
  top: 15.1%;
  width: 21.8%;
  height: 19%;
  display: grid;
  place-items: center;
  background: #f7f4ee;
}

.sold-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 78%;
  aspect-ratio: 2.55 / 1;
  color: var(--sold);
  border: clamp(1px, .16vw, 3px) solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: clamp(2px, .22vw, 5px);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(.72rem, 1.35vw, 2.05rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  opacity: .92;
  filter: saturate(.82);
  animation: stamp-in .52s cubic-bezier(.2,.9,.24,1.15) both;
}

.sold-emblem::before,
.sold-emblem::after {
  content: "";
  position: absolute;
  background: var(--sold);
  opacity: .18;
  pointer-events: none;
}

.sold-emblem::before { width: 22%; height: 1px; top: 24%; left: 8%; }
.sold-emblem::after { width: 14%; height: 1px; right: 10%; bottom: 23%; }

@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-6deg) scale(1.18); filter: blur(1px) saturate(.82); }
  to { opacity: .92; transform: rotate(-6deg) scale(1); filter: blur(0) saturate(.82); }
}

.control,
.utility,
.close-index {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #35322e;
  background: transparent;
  cursor: pointer;
}

.control {
  position: fixed;
  z-index: 15;
  top: 50%;
  width: 3.25rem;
  height: 5rem;
  transform: translateY(-50%);
  opacity: .42;
  transition: opacity .25s ease, transform .25s ease;
}

.control:hover { opacity: 1; }
.control:disabled { opacity: .09; cursor: default; }
.control.previous { left: clamp(.35rem, 1.8vw, 2rem); }
.control.next { right: clamp(.35rem, 1.8vw, 2rem); }
.control svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.3; }

.utilities {
  position: fixed;
  z-index: 30;
  right: clamp(1rem, 2vw, 2rem);
  top: clamp(1rem, 2vw, 2rem);
  display: flex;
  gap: .35rem;
}

.utility,
.close-index {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(24, 22, 20, .13);
  border-radius: 50%;
  background: rgba(248, 247, 243, .9);
  transition: background .2s ease, border-color .2s ease, transform .25s var(--ease);
}

.utility:hover,
.close-index:hover { background: #fff; border-color: rgba(24,22,20,.32); transform: scale(1.04); }
.utility svg,
.close-index svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
.utility:first-child svg { fill: currentColor; stroke: none; width: .92rem; }

.index-panel {
  position: fixed;
  z-index: 50;
  inset: 0 0 0 auto;
  width: min(48rem, 86vw);
  padding: clamp(4.8rem, 7vw, 6.5rem) clamp(1.4rem, 3vw, 3rem) 3rem;
  overflow: auto;
  background: rgba(252, 251, 248, .985);
  box-shadow: -2rem 0 5rem rgba(20, 18, 15, .12);
  transform: translate3d(102%, 0, 0);
  transition: transform .52s var(--ease);
}

.index-panel.open { transform: translate3d(0, 0, 0); }

.close-index { position: absolute; top: 1.5rem; right: 1.5rem; }

.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.35rem 1rem;
}

.thumb {
  position: relative;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), opacity .2s ease;
}

.thumb:hover { transform: translateY(-4px); }
.thumb img { display: block; width: 100%; aspect-ratio: 1.414 / 1; object-fit: fill; box-shadow: 0 .5rem 1.2rem rgba(30,25,20,.08); }
.thumb.is-current { outline: 1px solid var(--ink); outline-offset: 5px; }
.thumb.is-sold::after {
  content: "SOLD";
  position: absolute;
  top: 12%;
  right: 8%;
  padding: .18rem .38rem;
  color: var(--sold);
  border: 1px double currentColor;
  background: #faf7f1;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(.48rem, .8vw, .7rem);
  font-weight: 600;
  letter-spacing: .13em;
  transform: rotate(-6deg);
}

.index-scrim {
  position: fixed;
  z-index: 45;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(235, 232, 226, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}

.index-scrim.open { opacity: 1; visibility: visible; }

:fullscreen.viewer {
  padding: 2.2vh 5vw;
  background: var(--paper);
}

:fullscreen .book {
  width: min(90vw, calc(95dvh * 2.828));
}

@media (max-width: 900px) {
  .viewer { padding: 4.5rem 2.6rem 2.5rem; }
  .book { width: min(calc(100vw - 5.2rem), calc((100dvh - 7rem) * 1.414)); aspect-ratio: 1.414 / 1; }
  .spread .page,
  .spread.is-cover .page { flex-basis: 100%; width: 100%; max-width: 100%; }
  .page::after { display: none; }
  .control { width: 2.6rem; }
  .control.previous { left: 0; }
  .control.next { right: 0; }
  .thumbnail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sold-emblem { font-size: clamp(.68rem, 4vw, 1.35rem); }
}

@media (max-width: 520px) {
  .viewer { padding-inline: 1.4rem; }
  .book { width: min(calc(100vw - 2.8rem), calc((100dvh - 7rem) * 1.414)); }
  .control { top: auto; bottom: .7rem; transform: none; height: 2.7rem; }
  .control.previous { left: calc(50% - 3.2rem); }
  .control.next { right: calc(50% - 3.2rem); }
  .thumbnail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Presentation view: one complete artwork or catalogue page per frame. */
body { background: #f2f0ec; }
.viewer { padding: 3.2vh 4.8vw 9vh; background: #e9e5de; }
.viewer::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 75% at 50% -5%, rgba(255,255,255,.95), rgba(255,255,255,0) 82%), linear-gradient(180deg, #f5f3ef 0%, #eeeae4 91%, #ded8cf 91.2%, #d7d0c5 100%); }
.viewer::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 91%; height: 1px; background: rgba(77,64,50,.16); box-shadow: 0 .35rem 1.4rem rgba(70,55,40,.12); pointer-events: none; }
.book {
  z-index: 2;
  width: min(92vw, calc(85dvh * 1.414));
  aspect-ratio: 1.414 / 1;
  max-height: 85dvh;
  overflow: visible;
  transition: transform .65s var(--ease);
}
.book.is-arriving .spread { animation: gallery-arrival .95s cubic-bezier(.19,.77,.2,1) both; }
@keyframes gallery-arrival { from { opacity: 0; transform: translate3d(0,2.5rem,0) scale(.965); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
.spread,
.spread.is-cover { width: 100%; height: 100%; }
.spread .page,
.spread.is-cover .page {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background: #fbfaf7;
  box-shadow: 0 1.5rem 3rem rgba(38, 34, 29, .15), 0 0 0 1px rgba(44,39,32,.05);
}
.page img { object-fit: contain; }
.page.custom-caravaggio::after { content: "08"; position: absolute; right: 2.1%; bottom: 2.2%; z-index: 6; display: flex; align-items: center; justify-content: flex-end; width: 5.2%; height: 2.4%; background: #f8f7f3; color: #5e5b56; font: 500 clamp(5px,.55vw,10px) Arial,sans-serif; }
.logo { z-index: 34; width: 2.4rem; height: 2.65rem; border-radius: 0; }
.logo img { object-fit: contain; }
.control { display: none; }
.utilities { top: 1.1rem; right: 1.3rem; }
.presentation-nav {
  position: fixed;
  z-index: 32;
  bottom: clamp(.8rem, 2.2vh, 1.5rem);
  left: 50%;
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .35rem;
  border: 1px solid rgba(24,22,19,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 .5rem 1.7rem rgba(30,25,18,.10);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}
.presentation-nav button { min-width: 2.8rem; height: 2.65rem; padding: 0 .75rem; border: 0; border-radius: 999px; background: transparent; color: #2e2924; cursor: pointer; font-size: 1.25rem; transition: background .2s ease; }
.presentation-nav button:hover { background: #ece9e3; }
.presentation-nav button:disabled { opacity: .25; cursor: default; }
.presentation-nav #slideCounter { min-width: 5.7rem; text-align: center; font: 600 .68rem Arial,sans-serif; letter-spacing: .15em; color: #706a62; }
.presentation-nav #detailsButton { padding-inline: 1.1rem; border-left: 1px solid #e3dfd8; border-radius: 0 999px 999px 0; font: 600 .68rem Arial,sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.presentation-nav #detailsButton span { margin-left: .7rem; font-size: 1rem; font-weight: 400; }
[hidden] { display: none !important; }
.details-panel { position: fixed; z-index: 36; right: 1rem; bottom: 5rem; width: min(25rem, calc(100vw - 2rem)); padding: 2rem; background: rgba(255,255,255,.97); box-shadow: 0 1rem 3rem rgba(25,20,15,.2); border: 1px solid #e0dcd5; transform: translateY(1rem); opacity: 0; visibility: hidden; transition: .3s var(--ease); }
.details-panel.open { transform: translateY(0); opacity: 1; visibility: visible; }
.details-panel button { position: absolute; top: .5rem; right: .7rem; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; }
.details-panel small { font: 600 .55rem Arial,sans-serif; letter-spacing: .2em; color: #8b8176; }
.details-panel h2 { font: 500 clamp(1.5rem,2.5vw,2.3rem) "Cormorant Garamond",Georgia,serif; line-height: 1.05; margin: .7rem 0; }
.details-panel p { font: .82rem/1.6 Arial,sans-serif; color: #645e56; margin: 0; }
.details-panel figure { margin: 0 0 1.4rem; }
.details-panel figure img { display: block; width: 100%; height: min(28vh, 15rem); object-fit: cover; object-position: center 24%; filter: grayscale(1); }
.details-panel figcaption { margin-top: .5rem; color: #8b8176; font: .58rem/1.4 Arial,sans-serif; letter-spacing: .04em; }
.details-panel figcaption a { color: inherit; text-underline-offset: .18em; }
.details-panel .artist-note { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #e8e4dc; }
@media (min-width: 1100px) {
  body.details-open .book { transform: translateX(-13%) scale(.88); }
  .details-panel { right: clamp(1.5rem,3vw,4rem); top: 50%; bottom: auto; transform: translate(1.2rem,-50%); }
  .details-panel.open { transform: translate(0,-50%); }
}
@media (max-width: 900px) {
  .viewer { padding: 4rem .8rem 6rem; }
  .book { width: min(96vw, calc(78dvh * 1.414)); max-height: 78dvh; }
  .sold-emblem { font-size: clamp(.65rem, 3vw, 1.3rem); }
}
@media (max-width: 520px) {
  .presentation-nav { bottom: max(.6rem, env(safe-area-inset-bottom)); }
  .book { width: min(96vw, calc(75dvh * 1.414)); max-height: 75dvh; }
  .utilities { top: .7rem; right: .7rem; }
  .logo { top: .7rem; left: .7rem; }
}