/* Shared by the chosen gallery and the layout comparison. */
.memory-stack { display: contents; }
:root[data-gallery-layout="scrapbook"] .astro-gallery {
  display: grid;
  columns: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 110px 28px;
  padding: 80px 30px 60px;
}
:root[data-gallery-layout="scrapbook"] .memory-stack {
  --front-angle: -3deg;
  --back-angle: calc(var(--front-angle) + .6deg);
  --print-scale: .866;
  --photo-ratio: 3 / 4;
  --pile-y: 0px;
  display: grid;
  grid-template-areas: 'photos';
  position: relative;
  min-width: 0;
  isolation: isolate;
  transform: translateY(var(--pile-y));
  outline: none;
}
:root[data-gallery-layout="scrapbook"] .stack-landscape { --print-scale: 1.155; --photo-ratio: 4 / 3; }
:root[data-gallery-layout="scrapbook"] .stack-square { --print-scale: 1.072; --photo-ratio: 23 / 20; }
:root[data-gallery-layout="scrapbook"] .memory-stack:nth-child(6n + 2) { --front-angle: 2deg; --pile-y: 24px; }
:root[data-gallery-layout="scrapbook"] .memory-stack:nth-child(6n + 3) { --front-angle: -2deg; --pile-y: -8px; }
:root[data-gallery-layout="scrapbook"] .memory-stack:nth-child(6n + 4) { --front-angle: 3deg; --pile-y: 10px; }
:root[data-gallery-layout="scrapbook"] .memory-stack:nth-child(6n + 5) { --front-angle: -3.5deg; --pile-y: -14px; }
:root[data-gallery-layout="scrapbook"] .memory-stack:nth-child(6n) { --front-angle: 2deg; --pile-y: 18px; }
:root[data-gallery-layout="scrapbook"] .memory-stack:focus-visible {
  outline: 1px dashed #81776b;
  outline-offset: 24px;
}
:root[data-gallery-layout="scrapbook"] .memory {
  --mount-paper: url('./assets/astro-paper/mount-a.svg?v=2');
  display: block;
  grid-area: photos;
  justify-self: center;
  align-self: center;
  /* Reciprocal portrait/landscape widths keep the printed photo areas equal. */
  width: calc(100% * var(--print-scale) + 32px);
  min-width: 0;
  margin: 0;
  padding: 15px 15px 17px;
  background: none;
  box-shadow: none;
  isolation: isolate;
  transform-origin: 50% 8%;
  transform: rotate(var(--front-angle));
  transition: none;
  filter: none;
}
:root[data-gallery-layout="scrapbook"] .memory:nth-child(3n + 2) { --mount-paper: url('./assets/astro-paper/mount-b.svg?v=2'); }
:root[data-gallery-layout="scrapbook"] .memory:nth-child(3n) { --mount-paper: url('./assets/astro-paper/mount-c.svg?v=2'); }
:root[data-gallery-layout="scrapbook"] .memory-front {
  z-index: 2;
  transform: perspective(1100px) translateY(0) rotateX(0deg) rotate(var(--front-angle));
  transition: transform 650ms cubic-bezier(.22,.75,.22,1), filter 650ms ease;
}
:root[data-gallery-layout="scrapbook"] .memory-back {
  z-index: 1;
  transform: translate(4px, 6px) rotate(var(--back-angle));
  transition: transform 650ms cubic-bezier(.22,.75,.22,1);
}
:root[data-gallery-layout="scrapbook"] .memory-stack:is(:hover, :focus-within) { z-index: 10; }
:root[data-gallery-layout="scrapbook"] .memory-stack:is(:hover, :focus-within) .memory-front {
  transform: perspective(1100px) translateY(-100px) rotateX(-66deg) rotate(var(--front-angle));
  filter: drop-shadow(0 22px 12px #65564b22);
}
:root[data-gallery-layout="scrapbook"] .memory-stack:is(:hover, :focus-within) .memory-back {
  transform: translate(0, 6px) rotate(var(--front-angle));
}
@media (prefers-reduced-motion: reduce) {
  :root[data-gallery-layout="scrapbook"] .memory-front,
  :root[data-gallery-layout="scrapbook"] .memory-back { transition: none; }
}
:root[data-gallery-layout="scrapbook"] .memory::before,
:root[data-gallery-layout="scrapbook"] .memory::after {
  content: none;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
  background: none;
  box-shadow: none;
  pointer-events: none;
  clip-path: none;
}
:root[data-gallery-layout="scrapbook"] .memory::before {
  content: '';
  z-index: -1;
  inset: -4px;
  background: var(--mount-paper) center / 100% 100% no-repeat;
  filter: drop-shadow(.5px 1px .65px #66584d38) drop-shadow(1px 5px 4px #65564b28);
}
:root[data-gallery-layout="scrapbook"] .memory:nth-child(4n + 1)::after {
  content: '';
  z-index: -2;
  inset: -4px -5px -7px;
  background: url('./assets/astro-paper/mount-c.svg?v=2') center / 100% 100% no-repeat;
  transform: rotate(1.5deg);
  filter: drop-shadow(.5px 2px 1.5px #65564b24);
}
:root[data-gallery-layout="scrapbook"] .astro-photo {
  position: relative;
  padding: 2px;
  background: none;
  clip-path: none;
  filter: drop-shadow(.4px 1px .7px #4f443729);
}
:root[data-gallery-layout="scrapbook"] .astro-photo img {
  /* Both prints in a stack share a crop and size, leaving just a paper edge visible. */
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  object-position: center;
  -webkit-mask: url('./assets/astro-paper/photo-mask.svg?v=2') center / 100% 100% no-repeat;
  mask: url('./assets/astro-paper/photo-mask.svg?v=2') center / 100% 100% no-repeat;
}
:root[data-gallery-layout="scrapbook"] .memory-13 .astro-photo img { object-position: center top; }
:root[data-gallery-layout="scrapbook"] .astro-photo::after {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: 1;
  background: url('./assets/astro-paper/photo-rim.svg?v=2') center / 100% 100% no-repeat;
  pointer-events: none;
}
:root[data-gallery-layout="scrapbook"] .memory figcaption {
  min-height: 0;
  padding: 12px 2px 0;
  font-size: 25px;
  line-height: 1.2;
}
:root[data-gallery-layout="scrapbook"] .memory figcaption:empty { display: none; }
:root[data-gallery-layout="scrapbook"] .album-footer { padding-top: 60px; }

/* Clear cellophane: the print stays visible beneath a faint sheen. */
.photo-tape { display: none; }
:root[data-gallery-layout="scrapbook"] .photo-tape {
  display: block;
  position: absolute;
  z-index: 3;
  top: -8px;
  left: calc(50% - 46px);
  width: 92px;
  height: 38px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 1px 1px #49433c26);
  pointer-events: none;
}
:root[data-gallery-layout="scrapbook"] .photo-tape::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(174deg, transparent 36%, #ffffff54 40%, #ffffff08 46%, transparent 50%),
    linear-gradient(90deg, #ffffff18, #ffffff48 23%, #ffffff20 58%, #ffffff38),
    #a4a8a01c;
  border-block: 1px solid #ffffff70;
  box-shadow: inset 0 -1px 0 #777d7338, inset 1px 0 0 #ffffff70;
  clip-path: polygon(2% 0, 98% 1%, 100% 8%, 97% 16%, 100% 25%, 98% 34%, 100% 43%, 97% 53%, 100% 62%, 98% 72%, 100% 81%, 97% 91%, 99% 100%, 1% 98%, 3% 90%, 0 81%, 3% 71%, 0 62%, 2% 52%, 0 43%, 3% 33%, 0 24%, 3% 15%, 0 7%);
}
:root[data-gallery-layout="scrapbook"] .memory:nth-child(3n + 2) .photo-tape {
  top: 8px;
  left: -18px;
  width: 84px;
  transform: rotate(-35deg);
}
:root[data-gallery-layout="scrapbook"] .memory:nth-child(3n) .photo-tape {
  top: 7px;
  left: auto;
  right: -15px;
  width: 86px;
  transform: rotate(33deg);
}
:root[data-gallery-layout="scrapbook"] .memory:nth-child(6n + 4) .photo-tape {
  left: calc(50% - 40px);
  width: 80px;
  transform: rotate(5deg);
}

@media (max-width: 850px) {
  :root[data-gallery-layout="scrapbook"] .astro-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 105px 24px;
    padding-inline: 24px;
  }
  :root[data-gallery-layout="scrapbook"] .memory:nth-child(n) {
    margin: 0;
  }
}
@media (max-width: 560px) {
  :root[data-gallery-layout="scrapbook"] .astro-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 100px;
    padding: 70px 8px 40px;
  }
  :root[data-gallery-layout="scrapbook"] .memory:nth-child(n) {
    width: calc(76% * var(--print-scale) + 32px);
    margin: 0;
  }
}