/* Original photo reliefs and selected Hillman-style miniature silhouettes. */
.popup-region[data-scene^="charis-"] .pop-stage:has(.photo-scene-panel) {
  --photo-scene-scale: calc(var(--pop-scale) * .84);
  bottom: 35px;
  transform: translateX(-50%) scale3d(var(--photo-scene-scale), var(--photo-scene-scale), var(--photo-scene-scale));
}
.popup-region[data-scene^="charis-"] .pop-stage:has(.charis-miniature) {
  --miniature-scale: calc(var(--pop-scale) * .82);
  bottom: 35px;
  transform: translateX(-50%) scale3d(var(--miniature-scale), var(--miniature-scale), var(--miniature-scale));
}
.charis-art-window { display: block; position: absolute; inset: 0; overflow: hidden; }
.charis-scene-art {
  display: block; position: absolute; width: var(--art-width); height: var(--art-height);
  left: var(--art-left); top: var(--art-top); max-width: none;
  user-select: none; -webkit-user-drag: none;
}
/* Move the ball on its own composited surface without laying out the lane. */
.is-up .charis-miniature .mr-ball-travel { animation-name: charis-bowl-roll; }
@keyframes charis-bowl-roll { from { transform: translateX(0); } to { transform: translateX(758.0645%); } }
.charis-pin-shape {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(0deg, transparent 57%, #ba5149 58% 62%, transparent 63% 67%, #ba5149 68% 72%, transparent 73%),
    linear-gradient(90deg, #aaa9a0, #fffdf4 40%, #e2e0d6 69%, #999d94);
  clip-path: polygon(38% 3%, 61% 3%, 70% 10%, 69% 20%, 59% 29%, 64% 43%, 83% 58%, 93% 78%, 89% 91%, 71% 99%, 27% 99%, 10% 91%, 6% 78%, 17% 58%, 35% 43%, 40% 29%, 30% 20%, 29% 10%);
}
body.still .charis-miniature .mr-ball-travel { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .is-up .charis-miniature .mr-ball-travel { animation: none; }
}
.photo-scene-panel {
  transform: rotateX(var(--pop-angle)) rotateZ(var(--photo-turn, 0deg));
  --delay: 0ms;
}
.photo-sheet { position: absolute; inset: 0; transform-style: preserve-3d; }
.photo-paper-back {
  position: absolute; inset: -3px; background: #faf7ef;
  box-shadow: 0 1px 0 #c2b8a8, 0 3px 0 #e4dacb, 1px 6px 9px #3d342b38;
  border-radius: 1px; transform: translateZ(-1px);
}
.photo-layer {
  position: absolute; inset: 0; transform-style: flat;
}
.photo-layer img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: fill;
  user-select: none; -webkit-user-drag: none;
}
.photo-relief { transform: translateZ(0); transition: transform var(--fold-ms, 180ms) ease-in; }
.is-up .photo-relief { transform: translateZ(var(--photo-depth)); transition: transform 650ms cubic-bezier(.2,.75,.2,1) 80ms; }
.photo-scene-panel .photo-sheet::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 .5px #ffffff45;
}
.memory-heading-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; }
.memory-heading-row .kicker { flex: 1 1 auto; }
.scene-originals { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 0 0 6px; }
.scene-originals .scene-original {
  display: inline-flex; align-items: center; gap: 5px; width: auto; min-height: 24px;
  padding: 0; border: 0; border-bottom: 1px solid #98896c66; border-radius: 0;
  color: var(--ink-soft); background: none; box-shadow: none; transform: none;
  font: inherit; font-size: .68em; line-height: 1.4; text-align: left; cursor: pointer;
}
.scene-originals .scene-original::before, .scene-originals .scene-original::after { content: none; }
.scene-originals .scene-original:hover { transform: none; color: var(--ink); }
.scene-originals .scene-original:focus-visible { outline: 2px solid #9c7754; outline-offset: 3px; }
.scene-original-icon { font: 13px Arial, sans-serif; }
.lite .photo-paper-back { box-shadow: 0 1px 0 #c2b8a8, 1px 3px 5px #3d342b30; }
.lite .is-up .photo-relief { transition-duration: 380ms; transition-delay: 0ms; }
.still .photo-relief { transition: none; }
@media (prefers-reduced-motion: reduce) { .photo-relief, .is-up .photo-relief { transition: none; } }
@media (max-height: 559px) {
  .popup-region[data-scene^="charis-"] .pop-stage:has(.photo-scene-panel),
  .popup-region[data-scene^="charis-"] .pop-stage:has(.charis-miniature) { bottom: 47px; }
  .scene-originals { margin: 4px 0 7px; }
  .scene-originals .scene-original { min-height: 26px; }
}

/* Original prints sit just after their story, held by small pieces of tape.
   Fixed paper boxes keep the unpainted pagination probe identical to the page. */
.memory-photo-footer { --memory-photo-row: 100px; margin: 0; padding-top: 10px; }
.memory-photo-footer .memory-photo-thumbnails {
  display: flex; align-items: flex-start; gap: 14px;
  height: var(--memory-photo-row); max-width: 400px;
}
.memory-photo-footer .print,
.memory-photo-footer .print.r,
.memory-photo-footer .print.r:hover,
.memory-photo-footer .print:not(.r):hover {
  transform: none; transition: none;
}
.memory-photo-footer .memory-photo-thumbnails .print {
  --memory-photo-ratio: 1.3333;
  flex: 0 1 auto; box-sizing: border-box; min-width: 0; margin: 0;
  width: calc((var(--memory-photo-row) - 26px) * var(--memory-photo-ratio) + 8px);
  max-width: calc((100% - 14px) / 2); height: var(--memory-photo-row); padding: 4px;
  background: #fffdf6;
  box-shadow: 0 1px 2px #59472e26, 1px 3px 5px #59472e17, inset 0 0 0 .5px #d8cdbb;
}
.memory-photo-footer .memory-photo-thumbnails .print.video { --memory-photo-ratio: 1.7778; }
.memory-photo-footer .memory-photo-thumbnails .print.portrait { --memory-photo-ratio: .75; }
.memory-photo-footer .memory-photo-thumbnails .print:only-child { max-width: min(100%, 270px); }
.memory-photo-footer .memory-photo-thumbnails .print::before,
.memory-photo-footer .memory-photo-thumbnails .print::after {
  content: ''; display: block; top: -5px; left: 7px; right: auto;
  width: 24%; min-width: 19px; max-width: 34px; height: 12px;
  background: linear-gradient(100deg, #d4c18c70, #f0dfaa99, #d4c18c70);
  box-shadow: 0 .5px 1px #63533617; transform: rotate(-8deg); pointer-events: none;
}
.memory-photo-footer .memory-photo-thumbnails .print::after {
  left: auto; right: 7px; transform: rotate(8deg);
}
.memory-photo-footer .print .ph, .memory-photo-footer .print.portrait .ph {
  width: 100%; height: calc(var(--memory-photo-row) - 26px);
  aspect-ratio: auto; object-fit: contain; background: #f1eadc;
}
.memory-photo-footer .print figcaption {
  margin: 3px 0 0; font-size: 11px; line-height: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.memory-photo-footer .print .play { top: calc((var(--memory-photo-row) - 26px) / 2 + 4px); }
.memory-photo-footer .print:focus-visible { outline: 2px solid #9c7754; outline-offset: 3px; }
.memory-photo-footer .scene-originals { margin: 6px 0 0; }
/* Larger readers give the originals more room while keeping the shared scene
   and prose baselines unchanged on pages with and without photographs. */
@media (min-width: 860px) and (min-height: 950px) {
  .memory-photo-footer { --memory-photo-row: 128px; }
  .memory-photo-footer:has(:where(.memory-photo-thumbnails > .print:only-child)) { --memory-photo-row: 156px; }
  .memory-photo-footer[data-source="wales"] { --memory-photo-row: 200px; }
  .memory-photo-footer[data-source="flight"] { --memory-photo-row: 210px; }
}
@media (max-width: 859px), (max-height: 559px) {
  .memory-photo-footer { --memory-photo-row: 82px; padding-top: 8px; }
  .memory-photo-footer .memory-photo-thumbnails { gap: 10px; }
  .memory-photo-footer .memory-photo-thumbnails .print { max-width: calc((100% - 10px) / 2); box-shadow: 0 1px 2px #59472e26; }
  .memory-photo-footer .memory-photo-thumbnails .print:only-child { max-width: 100%; }
  .memory-photo-footer .memory-photo-thumbnails .print::after { display: none; }
}
@media (max-width: 859px) and (min-height: 560px) {
  .memory-photo-footer { --memory-photo-row: 90px; }
  .memory-photo-footer:has(:where(.memory-photo-thumbnails > .print:only-child)) { --memory-photo-row: 108px; }
}
@media (max-height: 559px) {
  .memory-photo-footer { --memory-photo-row: clamp(54px, calc(var(--ph) * .3), 82px); }
}
/* Leave room for more than one line of prose on the shortest portrait phones. */
@media (max-width: 859px) and (min-height: 560px) and (max-height: 620px) {
  .memory-photo-footer { --memory-photo-row: 68px; }
  .memory-photo-footer:has(:where(.memory-photo-thumbnails > .print:only-child)) { --memory-photo-row: 78px; }
}