/* Motion and composition from the reel, with the supplied LS photographs. */
.photo-journey { padding:0; background:#171918; color:#fff; }
.journey-stage { position:relative; isolation:isolate; overflow:hidden; padding:80px 24px; background:radial-gradient(ellipse at 50% 5%,#5b5a4c70,transparent 53%),repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 3px),#111b calc(25% - 3px),#57595055 25%),#222522; }
.museum-frame { position:relative; margin:30px auto; width:330px; max-width:78vw; aspect-ratio:2 / 3; padding:22px; background:linear-gradient(135deg,#e3c48c,#81633c 26%,#e8d1a4 49%,#967039 72%,#d5b679); border:3px solid #d8c19b; box-shadow:0 0 0 2px #58472d,0 0 0 6px #aa8c5b,6px 16px 35px #0009,inset 0 0 0 3px #745930,inset 0 0 0 6px #d6b77d,inset 0 0 0 10px #8c6c3e,inset 0 0 0 13px #ebd7a7; }
.museum-frame::before { content:''; position:absolute; inset:-5px; pointer-events:none; border:7px solid transparent; border-image:repeating-linear-gradient(35deg,#8c6935 0 2px,#d7b87d 3px 5px,#9f7b44 6px 7px,#f2d6a2 8px 10px) 9; }
.museum-frame::after { content:''; position:absolute; left:15%; right:15%; bottom:calc(100% + 8px); height:60vh; border-left:1px solid #a99e7c55; border-right:1px solid #a99e7c55; z-index:-1; }
.museum-frame img { width:100%; height:100%; display:block; object-fit:cover; box-shadow:0 0 0 3px #483a25,0 0 0 5px #f1dbb3; }
.frame-flourish { position:absolute; color:#dfc797; font:31px Georgia,serif; line-height:1; text-shadow:1px 2px 1px #49361f; z-index:2; }
.frame-flourish:nth-of-type(1) { top:-5px; left:-7px; transform:rotate(-45deg); }
.frame-flourish:nth-of-type(2) { top:-5px; right:-7px; transform:rotate(45deg); }
.frame-flourish:nth-of-type(3) { bottom:-5px; left:-7px; transform:rotate(-135deg); }
.frame-flourish:nth-of-type(4) { bottom:-5px; right:-7px; transform:rotate(135deg); }
.museum-label { position:absolute; top:83%; left:calc(100% + 24px); width:86px; padding:8px; background:#191b18; color:#c6bdab; font-size:6px; line-height:1.6; letter-spacing:.04em; box-shadow:1px 2px 3px #0005; }
.journey-heading { text-align:center; position:relative; z-index:7; pointer-events:none; }
.journey-heading .section-subtitle { font:500 .56rem var(--font-sans); letter-spacing:.22em; color:#eee6d5; margin-bottom:18px; }
.journey-heading h2 { font-family:var(--font-sans); font-size:clamp(2rem,3.8vw,4.3rem); font-weight:600; letter-spacing:-.065em; line-height:1.08; max-width:470px; margin:0 auto 18px; text-wrap:balance; color:#fff; }
.journey-heading p { font-size:.7rem; font-weight:400; max-width:290px; margin:auto; line-height:1.65; }
.journey-detail,.journey-eye,.journey-wide { display:none; }
.wall-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); align-items:center; justify-items:center; gap:18px; padding:30px 0; }
.wall-photo { display:block; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; padding:clamp(5px,1vw,13px); border:5px solid #46463e; background:#e9e7dd; box-shadow:0 0 0 1px #131410,2px 5px 8px #0007; }
.wall-photo:nth-child(3n+1) { width:83%; height:93%; }
.wall-photo:nth-child(5n+2) { height:83%; }
.wall-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:filter .3s; }
a.wall-photo:hover img { filter:brightness(1.15); }
.wall-center { position:relative; width:100% !important; height:100% !important; border-color:#bda979; background:#242723; }
.wall-center::after { content:''; position:absolute; inset:6px; border:1px solid #a48e6066; pointer-events:none; }
.wall-family { display:none; }
.journey-bottom { display:flex; align-items:center; justify-content:space-between; font-size:.56rem; letter-spacing:.13em; position:relative; z-index:9; }
.journey-scroll { display:inline-flex; align-items:center; gap:20px; }
.journey-scroll span { font-size:20px; }
.journey-skip { color:#eee4d2; padding:12px 16px; border:1px solid #ccb88a55; background:#191c19aa; text-decoration:none; }
.journey-progress { position:absolute; bottom:0; left:0; width:100%; height:2px; background:#bda57625; z-index:10; }
.journey-progress span { display:block; height:100%; background:#bda576; transform-origin:left; transform:scaleX(0); }
.journey-animated { height:620vh; }
.journey-animated .journey-stage { position:sticky; top:0; height:100vh; padding:0; border-radius:24px 24px 0 0; }
.journey-animated .museum-frame { position:absolute; left:50%; top:50%; margin:0; width:min(29vw,350px,42vh); max-width:none; transform:translate(-50%,-50%); z-index:2; will-change:transform; }
.journey-animated .journey-detail,.journey-animated .journey-eye,.journey-animated .journey-wide { display:block; position:absolute; inset:0; overflow:hidden; opacity:0; }
.journey-animated .journey-detail { z-index:3; }
.journey-animated .journey-eye { z-index:4; }
.journey-animated .journey-wide { z-index:5; }
.journey-animated .journey-detail img,.journey-animated .journey-eye img,.journey-animated .journey-wide img { width:100%; height:100%; object-fit:cover; will-change:transform; }
.journey-detail img { object-position:50% 45%; transform-origin:52% 55%; }
.journey-eye img { object-position:50% 25%; }
.journey-wide img { object-position:50% 50%; }
.journey-animated .wall-camera { position:absolute; inset:0; opacity:0; z-index:6; will-change:transform; transform-origin:50% 50%; pointer-events:none; }
.journey-animated .wall-grid { width:114%; height:calc(100% - 110px); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:0; }
.journey-animated .wall-family { position:absolute; display:block; width:23%; height:27%; top:50%; left:50%; transform:translate(-50%,-50%); z-index:7; border:4px solid #baa781; padding:9px; background:#e7e0d0; box-shadow:0 10px 40px #0007; opacity:0; pointer-events:none; }
.wall-family img { width:100%; height:100%; object-fit:cover; }
.journey-animated .journey-heading { position:absolute; left:50%; top:50%; width:min(80%,580px); transform:translate(-50%,-50%); text-shadow:0 2px 24px #0009; }
.journey-animated .journey-bottom { position:absolute; bottom:24px; left:4%; right:4%; }
.journey-animated.wall-arrived .wall-camera { pointer-events:auto; }
.journey-animated .journey-heading::before { content:''; position:absolute; z-index:-1; inset:-50px; background:radial-gradient(ellipse,#1219124d,transparent 70%); }
@media (max-width:768px) {
  .journey-animated { height:570svh; }
  .journey-animated .journey-stage { height:100svh; }
  .journey-animated .museum-frame { width:min(65vw,38svh); padding:17px; }
  .journey-heading h2 { font-size:2.3rem; max-width:310px; }
  .journey-heading p { font-size:.65rem; max-width:240px; }
  .museum-label { display:none; }
  .journey-animated .wall-grid { width:230%; height:75%; gap:10px; }
  .wall-photo { padding:5px; border-width:3px; }
  .journey-animated .wall-family { width:48%; height:23%; }
  .journey-bottom { font-size:.48rem; }
  .journey-skip { padding:10px; }
}
@media (prefers-reduced-motion:reduce), (max-height:500px) {
  .photo-journey { height:auto; }
  .journey-stage { border-radius:0; padding:60px 24px; }
  .journey-heading { opacity:1 !important; transform:none !important; margin-block:40px; }
  .museum-frame { width:230px; transform:none !important; opacity:1 !important; }
  .wall-camera { transform:none !important; opacity:1 !important; }
  .wall-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(5,180px); gap:12px; }
  .wall-center { display:none; }
  .wall-photo { width:100% !important; height:100% !important; }
  .journey-scroll,.journey-progress { display:none; }
  .journey-bottom { justify-content:flex-end; }
}
@media (prefers-reduced-motion:reduce) and (max-width:600px), (max-height:500px) and (max-width:600px) {
  .wall-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(10,200px); }
}