/* Home memories: standalone photos, changing scale, and room to move. */
.legacy-evidence.home-photo-collage { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:46px 28px; margin:65px 0 55px; padding:15px 8px 35px; }
.home-memory { --photo-turn:-4deg; --photo-x:0px; --photo-y:0px; --photo-time:6.8s; --photo-delay:-1s; --photo-width:100%; --photo-offset:0px; min-width:0; width:var(--photo-width); margin:0; justify-self:center; transform:translate3d(var(--photo-x),calc(var(--photo-y) + var(--photo-offset)),0) rotate(var(--photo-turn)); transition:opacity .7s,transform .7s cubic-bezier(.16,1,.3,1); }
.home-memory:nth-child(2) { --photo-turn:3deg; --photo-width:95%; --photo-offset:30px; --photo-time:8s; --photo-delay:-3s; }
.home-memory:nth-child(3) { --photo-turn:-3deg; --photo-width:88%; --photo-time:7.6s; --photo-delay:-4s; }
.home-memory:nth-child(4) { --photo-turn:4deg; --photo-width:88%; --photo-offset:25px; --photo-time:8.6s; --photo-delay:-2s; }
.home-memory:nth-child(5) { --photo-turn:-2deg; --photo-width:92%; --photo-time:7.2s; --photo-delay:-5s; }
.home-memory:nth-child(6) { --photo-turn:3deg; --photo-offset:22px; --photo-time:9s; --photo-delay:-3s; }
.legacy-evidence.home-photo-collage .media-tile { border:0; background:transparent; cursor:pointer; box-shadow:none; }
.home-memory .memory-image { display:block; filter:drop-shadow(0 12px 13px #11111122); }
.legacy-evidence.home-photo-collage img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; border-radius:10% 18% 12% 6% / 7% 10% 8% 16%; }
.home-memory:nth-child(2n) img { border-radius:18% 8% 16% 9% / 8% 17% 8% 12%; }
.legacy-evidence.home-photo-collage .evidence-caption { display:block; min-height:0; padding:19px 4px 0; background:transparent; color:var(--ink); font-size:.875rem; line-height:1.55; letter-spacing:.025em; text-align:center; }
.home-memory .media-tile:focus-visible { outline:3px solid #6243c3; outline-offset:9px; border-radius:16px; }
.home-memory:focus-within { z-index:2; }
.home-memory .media-tile:active { scale:.975; }

/* Story: one horizontal section, copy left and both documents together right. */
.story-page .giving-back { grid-template-columns:minmax(0,1fr); gap:44px; align-items:center; }
.giving-copy { min-width:0; }
.story-page .giving-back .giving-copy h2 { margin:28px 0 30px; font-size:clamp(2.65rem,4.4vw,5.4rem); line-height:1.08; }
.story-page .giving-copy .prose { max-width:60ch; }
.story-correspondence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:center; min-width:0; padding:25px 8px; }
.story-page .story-correspondence .story-hospital-letter { --photo-turn:-5deg; --photo-x:0px; --photo-y:0px; --photo-time:8s; --photo-delay:-2s; position:relative; align-self:center; width:100%; max-width:none; margin:0; transform:translate3d(var(--photo-x),var(--photo-y),0) rotate(var(--photo-turn)); transition:opacity .7s,transform .7s cubic-bezier(.16,1,.3,1); }
.story-page .story-correspondence .story-hospital-letter:nth-child(2) { --photo-turn:5deg; --photo-time:9.2s; --photo-delay:-5s; margin-top:56px; }
.story-page .story-correspondence .media-tile { border:0; background:transparent; border-radius:3px; box-shadow:0 12px 24px #1111112b; cursor:zoom-in; }
.story-page .story-correspondence img { width:100%; height:auto; aspect-ratio:auto; object-fit:contain; border-radius:3px; }
.story-page .story-correspondence figcaption { margin:0; padding:18px 2px 0; font-size:.875rem; line-height:1.6; }
.story-correspondence .media-tile:focus-visible { outline:3px solid #6243c3; outline-offset:7px; }
.story-correspondence .expand-mark { width:32px; height:32px; right:8px; top:8px; }

/* Share the album's visibility and motion preference controller. */
.album-motion :is(.home-memory,.story-correspondence .story-hospital-letter):not(.photo-entered) { opacity:0; transform:translateY(35px) rotate(calc(var(--photo-turn) - 4deg)); }
.album-motion .home-memory .media-tile,.album-motion .story-correspondence .media-tile { animation:memory-float var(--photo-time) ease-in-out var(--photo-delay) infinite; animation-play-state:paused; }
.album-motion .home-memory.photo-visible .media-tile,.album-motion .story-correspondence .photo-visible .media-tile { animation-play-state:running; }
:is(.album-tab-hidden,.viewer-open,.menu-open) :is(.home-memory,.story-correspondence) .media-tile { animation-play-state:paused !important; }
@keyframes memory-float { 0%,100% { translate:0 0; } 50% { translate:0 -9px; } }
@media (hover:hover) and (pointer:fine) {
  .home-memory:hover { z-index:2; transform:translate3d(var(--photo-x),calc(var(--photo-y) + var(--photo-offset) - 8px),0) rotate(0); }
  .story-page .story-correspondence .story-hospital-letter:hover { z-index:2; transform:translate3d(var(--photo-x),calc(var(--photo-y) - 8px),0) rotate(0); }
  .home-memory:hover .media-tile,.story-correspondence .story-hospital-letter:hover .media-tile { animation-play-state:paused; }
}
@media (min-width:900px) {
  .legacy-evidence.home-photo-collage { grid-template-columns:repeat(3,minmax(0,1fr)); gap:65px 5vw; padding:20px 1vw 45px; margin-top:75px; }
  .home-memory:nth-child(2) { --photo-offset:48px; }
  .home-memory:nth-child(5) { --photo-offset:40px; }
  .legacy-evidence.home-photo-collage .evidence-caption { font-size:1rem; }
}
@media (min-width:1100px) {
  .story-page .giving-back { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:5vw; }
  .story-correspondence { gap:0; padding:35px 0; }
  .story-page .story-correspondence .story-hospital-letter { width:112%; }
  .story-page .story-correspondence .story-hospital-letter:nth-child(2) { margin:95px 0 0 -12%; }
  .story-page .story-correspondence figcaption { max-width:92%; }
}
@media (max-width:450px) {
  .legacy-evidence.home-photo-collage { gap:40px 22px; padding-inline:0; }
  .legacy-evidence.home-photo-collage .evidence-caption { font-size:.8125rem; padding-top:15px; letter-spacing:0; }
  .story-correspondence { gap:14px; padding-inline:0; }
  .story-page .story-correspondence figcaption { font-size:.8125rem; }
}
@media (prefers-reduced-motion:reduce) {
  .home-memory,.story-correspondence .story-hospital-letter,.home-memory .media-tile,.story-correspondence .media-tile { animation:none !important; transition:none !important; }
  .album-motion :is(.home-memory,.story-correspondence .story-hospital-letter):not(.photo-entered) { opacity:1; transform:rotate(var(--photo-turn)); }
}

/* Original objects and drawings meet in open, floating pairs. */
.story-page .pair-grid{gap:64px 6vw;margin-top:52px}
.story-page .pair-card{border:0;background:none;padding:12px 6px;position:relative}
.story-page .pair-images{gap:16px;align-items:center;padding:12px 0}
.story-page .pair-images .media-tile{border:0;background:none;border-radius:44% 56% 45% 55% / 54% 42% 58% 46%;overflow:hidden;transform:rotate(-4deg);box-shadow:0 10px 22px #1112;transition:transform .35s}
.story-page .pair-images .media-tile:nth-child(2){border-radius:53% 47% 59% 41% / 42% 57% 43% 58%;transform:rotate(4deg) translateY(14px)}
.story-page .pair-images img{aspect-ratio:auto;height:auto;object-fit:contain}
.story-page .pair-card:nth-child(even) .pair-images .media-tile:first-child{transform:rotate(3deg)}
.story-page .pair-images .expand-mark{top:auto;bottom:12%;right:13%;width:30px;height:30px}
.story-page .pair-images .media-tile:hover,.story-page .pair-images .media-tile:focus-visible{transform:rotate(0) translateY(-6px);outline-offset:6px}
.story-page .pair-labels{margin-top:22px;text-align:center;color:#555}
.story-page .pair-card h3{text-align:center;margin-top:16px;font-size:clamp(1.5rem,2.6vw,2.4rem)}
.story-page .pairs-section .section-lede{max-width:70ch;line-height:1.8}
.story-page .pairs-section .section-lede strong{font-weight:700}
@media(prefers-reduced-motion:no-preference){
 .story-page .pair-images img{animation:original-duck-bob 7s ease-in-out infinite}
 .story-page .pair-images .media-tile:nth-child(2) img{animation-delay:-3.5s}
 .story-page .pair-card:nth-child(even) img{animation-delay:-2s}
}
@keyframes original-duck-bob{0%,100%{scale:1}50%{scale:1.025}}
body.motion-paused .pair-images img,body.viewer-open .pair-images img{animation-play-state:paused!important}
@media(max-width:599px){.story-page .pair-grid{grid-template-columns:minmax(0,1fr);gap:35px}.story-page .pair-images{gap:12px}.story-page .pair-labels{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.story-page .pair-images .media-tile{transition:none}}