/* A pinned canvas and separate, naturally scrolling captions, following the National Gallery story. */
.mirror-story {
  --mirror-edge: clamp(24px, 3.15vw, 40px);
  --mirror-screen: 100vh;
  --mirror-screen: 100svh;
  --stock: #141310;
  --paper-veil-amount: 75%;
  color: #fff;
}
.mirror-story:focus {outline: none;}
.mirror-sequence {position: relative; isolation: isolate; overflow-anchor: none;}
.mirror-stage {
  position: sticky;
  top: 0;
  height: var(--mirror-screen);
  margin-bottom: calc(-1 * var(--mirror-screen));
  overflow: hidden;
  pointer-events: none;
  --stock: #171613;
}
.mirror-painting {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  max-width: none;
  aspect-ratio: auto 54 / 65;
  transform-origin: 0 0;
}
.mirror-shade, .mirror-shade::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mirror-shade {background: rgb(12 11 10 / var(--cover-shade, .58));}
.mirror-shade::after {
  content: '';
  background: linear-gradient(to top, rgb(0 0 0 / .78), transparent 42%);
}
.mirror-cover {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--mirror-screen);
  padding: 48px var(--mirror-edge);
  text-align: center;
}
.mirror-cover-type {max-width: 700px; text-shadow: 0 2px 15px #0008;}
.mirror-category {margin-bottom: 22px; font: 500 13px/1.6 var(--sans); letter-spacing: .14em;}
.mirror-cover h2 {font: 400 clamp(30px, 4vw, 48px)/1.28 var(--sans); letter-spacing: -.045em; text-wrap: balance;}
.mirror-subtitle {margin-top: 20px; font: 400 16px/1.5 var(--sans);}
.mirror-enter {
  position: absolute;
  bottom: max(26px,env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 12px;
  color: #fff;
  font: 14px/1.5 var(--sans);
}
.mirror-enter span {transition: transform .2s ease-out;}
.mirror-enter:hover span {transform: translateY(3px);}
.mirror-story :is(button,a):focus-visible {outline: 2px solid currentColor; outline-offset: 4px;}
.mirror-steps {
  position: relative;
  overflow: clip;
  pointer-events: none;
  padding: calc(var(--mirror-screen) - 56px) var(--mirror-edge) clamp(80px,30vh,360px);
}
.mirror-step + .mirror-step {margin-top: calc(var(--mirror-screen) - 56px);}
.mirror-step {padding: 24px 0 40px;}
.mirror-step.mirror-linger {padding-bottom: clamp(70px,17vh,200px);}
.mirror-caption {
  position: relative;
  isolation: isolate;
  width: min(45%, 600px);
  margin: 0;
  color: #fff;
  font: 400 18px/1.62 var(--sans);
  text-shadow: 0 1px 5px #000, 0 2px 14px #000a;
  text-wrap: pretty;
  pointer-events: auto;
}
.mirror-caption span {display: block; margin-top: .75em;}
.mirror-caption:focus {outline: none;}
.mirror-caption::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -38px -35px;
  background: radial-gradient(ellipse at center, #0008 12%, transparent 74%);
}
.mirror-step[data-side="panel"] .mirror-caption {
  width: min(40%, 600px);
  padding: 30px;
  background: rgb(0 0 0 / .70);
  font-size: 16px;
  line-height: 1.65;
  text-shadow: none;
}
.mirror-step[data-side="panel"] .mirror-caption::before {content:none;}
.mirror-step[data-side="right"] .mirror-caption {margin-left: auto;}
.mirror-step[data-side="center"] .mirror-caption {margin-inline: auto; text-align: center;}
.mirror-credit {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(54px,7vw,104px) max(var(--mirror-edge),calc((100% - 970px) / 2));
  color: var(--ink);
  --paper-veil-amount: 0%;
}
.dark .mirror-credit {--paper-veil-amount: 65%;}
.mirror-credit h3 {margin: 0 0 14px; font: 400 clamp(27px,3vw,40px)/1.25 var(--serif);}
.mirror-credit h3 i {margin-left: .4em; font-size: .70em; white-space: nowrap;}
.mirror-credit p, .mirror-credit nav, .mirror-replay {font: 14px/1.8 var(--sans);}
.mirror-credit nav {display: flex; flex-wrap: wrap; column-gap: 20px;}
.mirror-credit a, .mirror-replay {display: inline-flex; align-items: center; min-height: 44px;}
.mirror-credit a:hover, .mirror-replay:hover {text-decoration: underline; text-underline-offset: 4px;}
.mirror-credit .mirror-replay {margin-top: 4px;}
@media (max-width: 700px) {
  .mirror-cover h2 {font-size: clamp(28px,7.8vw,39px);}
  .mirror-subtitle {font-size: 15px;}
  .mirror-step {padding-bottom: 48px;}
  .mirror-caption, .mirror-step[data-side="panel"] .mirror-caption {width: min(100%, 32em);}
  .mirror-caption {font-size: 17px;}
  .mirror-step[data-side="panel"] .mirror-caption {padding: 24px;}
}
@media (prefers-reduced-motion: reduce) {
  .mirror-stage {position: relative; height: min(72svh,710px); margin-bottom: 0;}
  .mirror-painting {width: 100%; object-fit: contain; transform: none !important;}
  .mirror-shade {display: none;}
  .mirror-cover {min-height: auto; padding-block: 42px;}
  .mirror-enter {display: none;}
  .mirror-steps {padding: 0 var(--mirror-edge) 52px;}
  .mirror-step, .mirror-step.mirror-linger {padding: 14px 0;}
  .mirror-step + .mirror-step {margin: 0;}
  .mirror-step .mirror-caption, .mirror-step[data-side] .mirror-caption {
    margin: 0 auto; padding: 0; width: min(100%,600px);
    text-align: left; text-shadow: none; background: none; font: 400 17px/1.85 var(--sans);
  }
  .mirror-caption::before {content: none;}
}