/* ---------- Muses: painting cards floating in a 3D field; one opens into a big card (muses.js) ---------- */
.muse {
  --muse-bg: #f2f2ee;                          /* = --page: the field fades into it */
  position: relative;
  z-index: 3;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  /* the paper fades in and out at the edges like every other section (blend.css), so the pink / mint
     backdrop shows through where it meets its neighbours instead of a hard line */
  background: linear-gradient(to bottom, var(--page-0) 0, var(--page) var(--blend), var(--page) calc(100% - var(--blend)), var(--page-0) 100%);
  color: var(--ink);
  touch-action: pan-y;                          /* vertical swipes scroll the page, sideways ones pan the field */
}
.muse__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* melts into the sections above and below, like the rest of the page */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend), #000 calc(100% - var(--blend)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend), #000 calc(100% - var(--blend)), transparent 100%);
}
.muse.is-dragging .muse__field { cursor: grabbing; }
.muse.is-over-card .muse__field { cursor: pointer; }

/* ---------- a tilted ring of words in the middle, turning with the paintings (muses.js); drawn in
   "difference", so it reads dark over the paper and light over a painting ---------- */
.muse__ring {
  position: absolute;
  z-index: 1;
  left: 52%;
  top: 54%;
  width: 0;
  height: 0;
  perspective: 1000px;
  pointer-events: none;
  transform: rotateZ(-12deg);
  mix-blend-mode: difference;
}
.muse__spin { position: absolute; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(var(--a, 0deg)); }
.muse__spin b {
  position: absolute;
  left: -.3em;
  top: -.6em;
  width: .6em;
  text-align: center;
  font: 600 clamp(18px, 2.2vw, 36px)/1.2 var(--mono);
  text-transform: lowercase;
  color: #fff;
  transform: rotateY(var(--r)) translateZ(var(--R));
}
/* the white swoosh: part of a circle lying flat under the words */
.muse__orbit {
  position: absolute;
  left: calc(var(--R) * -1.08);
  top: calc(var(--R) * -1.08);
  width: calc(var(--R) * 2.16);
  height: calc(var(--R) * 2.16);
  border: 3px solid #fff;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  transform: translateY(1.1em) rotateX(90deg) rotateZ(-30deg);
  font-size: clamp(18px, 2.2vw, 36px);
}
.muse.is-fallback .muse__ring { display: none; }

/* ---------- heading, over a soft wash of paper so it stays readable above the cards ---------- */
.muse__head {
  position: absolute;
  z-index: 2;
  left: 4.5vw;
  top: 14vh;
  max-width: 440px;
  pointer-events: none;
}
.muse__head::before {
  content: "";
  position: absolute;
  inset: -60px -90px -60px -70px;
  z-index: -1;
  background: radial-gradient(closest-side, var(--muse-bg) 55%, rgba(242, 242, 238, 0));
}
.muse__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.muse__eyebrow i { width: 11px; height: 11px; background: var(--accent); }
.muse__title {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: .98;
  letter-spacing: -0.02em;
}
.muse__intro { margin-top: 18px; max-width: 34em; font-size: 14px; line-height: 1.55; color: var(--muted); }
.muse__hint {
  margin-top: 18px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- the index: every painting as a real button. Out of sight until it gets keyboard focus
   (then it's a panel); it's the whole section when there's no WebGL (.is-fallback) ---------- */
.muse__index {
  position: absolute;
  z-index: 3;
  left: 4.5vw;
  bottom: 8vh;
  width: min(560px, 91vw);
  max-height: 46vh;
  overflow: auto;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(242, 242, 238, .96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
  clip-path: inset(50%);                        /* (visually hidden, still focusable + readable) */
}
.muse__index:focus-within, .muse.is-fallback .muse__index { clip-path: none; }
.muse__index-title { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.muse__index ol { list-style: none; columns: 2 220px; column-gap: 22px; }
.muse__index button {
  display: block;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 13px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}
.muse__index button span { color: var(--muted); font-size: 11px; }
.muse__index button:hover, .muse__index button:focus-visible { color: var(--accent); }
.muse__index button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
/* no WebGL: heading + index simply flow down the section */
.muse.is-fallback { height: auto; min-height: 100svh; padding: 14vh 4.5vw 10vh; }
.muse.is-fallback .muse__head, .muse.is-fallback .muse__index { position: static; }
.muse.is-fallback .muse__hint { display: none; }
.muse.is-fallback .muse__index { margin-top: 36px; width: auto; max-width: 760px; max-height: none; padding: 0; box-shadow: none; background: none; }

/* ---------- the opened painting: a big card like the small ones ---------- */
.muse__detail {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  cursor: zoom-out;                             /* (the field behind dims itself: muses.js) */
}
.muse__detail[hidden] { display: none; }
.muse__card {
  position: relative;
  /* as wide as fits: tall paintings make the card narrower, so the whole painting + its words fit the screen */
  width: min(420px, 84vw, calc(54vh * var(--ratio, 1) + 28px));
  padding: 14px 14px 18px;
  border-radius: 28px;
  background: linear-gradient(#3b3835, #22201f);
  color: #f3f1ea;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .34);
  transform-origin: 0 0;                        /* (muses.js folds it onto the small painting and back) */
  will-change: transform, clip-path;
  cursor: auto;
}
.muse__art {
  aspect-ratio: var(--ratio, 1);                /* the painting's own proportions: shown whole, never cropped */
  border-radius: 16px;
  overflow: hidden;
  background: #2f2c2a no-repeat;                /* + the small card's picture from the atlas, set by muses.js */
}
.muse__art img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s ease; }
.muse__art img.is-loaded { opacity: 1; }
.muse__d-title { margin-top: 16px; font: 600 22px/1.15 var(--sans); letter-spacing: -0.01em; }
.muse__d-meta { margin-top: 4px; font-size: 13px; color: rgba(243, 241, 234, .6); }
.muse__d-time { position: relative; display: flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; font: 400 10px/1 var(--mono); color: rgba(243, 241, 234, .45); }
.muse__d-time span { position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; background: rgba(243, 241, 234, .22); }
.muse__d-time i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--at, 50%); border-radius: 1px; background: rgba(243, 241, 234, .7); }
.muse__d-time b { position: absolute; left: var(--at, 50%); top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--green); }
.muse__d-note { margin-top: 14px; font: 400 15px/1.5 var(--serif); font-size: 18px; line-height: 1.35; }
.muse__close {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 18, .55);
  color: #fff;
  font: 400 22px/1 var(--sans);
  cursor: pointer;
}
.muse__close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (max-width: 760px) {
  .muse__head { left: 16px; right: 16px; top: 11vh; }
  .muse__ring { left: 50%; top: 66%; }
  .muse__spin b, .muse__orbit { font-size: 15px; }
  .muse__intro { font-size: 13px; }
  .muse__index { left: 16px; }
  .muse__card { padding: 12px 12px 16px; border-radius: 24px; }
  .muse__d-note { font-size: 16px; }
}
@media (max-height: 640px) {
  .muse__card { width: min(320px, 84vw, calc(46vh * var(--ratio, 1) + 28px)); }
  .muse__d-note { font-size: 15px; }
}