/* A photo-book fallback first; ordinary page scroll adds the floating collage. */
#our-story{overflow:clip}
#our-story::before{display:none}
.story-scroll{margin-top:28px}
.story-collage-stage.orbit-scene{height:auto;max-width:1600px;margin:0 auto;padding:35px var(--page) 45px;isolation:isolate}
.story-collage-stage::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:min(115vw,1400px);aspect-ratio:1;border-radius:50%;background:url('/assets/logo-round.webp') center/cover no-repeat;opacity:.075;transform:translate(-50%,-50%) rotate(11deg)}
.story-collage-canvas{position:relative}
.story-collage-stage .orbit,.story-collage-stage .orbit-center-mark{display:none}
.story-collage-stage h2{position:relative;top:auto;left:auto;transform:none;width:min(84%,760px);margin:0 auto 62px;font-size:clamp(42px,5.6vw,84px);line-height:1.03;z-index:3}
.story-collage-stage .bug-guys-lettering{width:100%;margin-top:10px}
.story-collage-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:38px 28px}
.story-collage-photo.story-photo{position:relative;inset:auto;width:100%;margin:0;padding:10px 10px 11px;transform:rotate(var(--photo-tilt));border:1px solid #252b2314;border-radius:var(--radius-card);box-shadow:0 10px 25px #252b231a}
.story-collage-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-inset)}
.story-collage-photo.is-portrait img{aspect-ratio:3/4}
.story-collage-photo figcaption{font-size:7px;line-height:1.5;margin-top:10px;letter-spacing:.025em;color:#414938}
.story-collage-photo:nth-child(even){margin-top:28px}
.story-scroll-tools{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px;position:relative;z-index:5}
.story-scroll-hint{display:flex;align-items:center;gap:12px;font-size:9px}
.story-scroll-hint .ui-icon{font-size:18px}
.story-animated-note,.story-progress{display:none}
.story-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 16px;border:1px solid #252b2380;border-radius:var(--radius-control);background:#f2f0e6db;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.story-motion-toggle:hover{background:#faf9f3}
.story-motion-toggle:focus-visible{outline-color:var(--ink)}
.story-motion-toggle .ui-icon{width:14px;height:14px}
.story-collection-link{margin-top:10px}

/* Motion is enabled only when JS and the visitor's preferences allow it. */
.story-scroll-active .story-scroll{height:260svh}
.story-scroll-active .story-collage-stage{position:sticky;top:0;height:100svh;max-width:none;padding:0;overflow:hidden}
.story-scroll-active .story-collage-canvas{height:100%;width:100%}
.story-scroll-active .story-collage-stage .orbit{display:block;top:50%}
.story-scroll-active .story-collage-stage .orbit-one{width:62vmin;height:62vmin}
.story-scroll-active .story-collage-stage .orbit-two{width:98vmin;height:98vmin}
.story-scroll-active .story-collage-stage .orbit-center-mark{display:block;top:10%;font-size:13px;opacity:.6}
.story-scroll-active .story-collage-stage h2{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:min(68vw,890px);margin:0;font-size:clamp(48px,6.1vw,88px);isolation:isolate}
.story-scroll-active .story-collage-stage h2::before{content:"";position:absolute;inset:-45% -20%;z-index:-1;background:radial-gradient(ellipse,#f2f0e6d9 0%,#f2f0e699 30%,#f2f0e600 68%);pointer-events:none}
.story-scroll-active .story-collage-photos{position:absolute;inset:0;display:block;mask-image:linear-gradient(transparent,black 8%,black 91%,transparent);pointer-events:none}
.story-scroll-active .story-collage-photo.story-photo{position:absolute;left:50%;top:0;width:clamp(165px,18vw,265px);margin:0;transform:translate3d(calc(-50% + var(--photo-x,0px)),calc(-50% + var(--photo-y,0px)),0) rotate(var(--photo-rotation,var(--photo-tilt)));transition:none}
.story-scroll-active.is-story-visible .story-collage-photo{will-change:transform}
.story-scroll-active .story-scroll-tools{position:absolute;bottom:22px;left:var(--page);right:var(--page);margin:0}
.story-scroll-active .story-static-note{display:none}
.story-scroll-active .story-animated-note{display:flex;align-items:center;gap:12px}
.story-scroll-active .story-progress{display:block;position:relative;width:72px;height:2px;background:#252b2333;overflow:hidden}
.story-progress::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--story-progress,0));transform-origin:left}
.story-scroll-active .story-bottom{margin-top:35px}

@media(max-width:760px){
 .story-scroll{margin-top:18px}
 .story-collage-stage.orbit-scene{padding:35px var(--page)}
 .story-collage-stage h2{width:100%;font-size:clamp(34px,8.5vw,55px);margin-bottom:45px}
 .story-collage-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
 .story-collage-photo.story-photo{padding:7px 7px 9px;border-radius:14px}
 .story-collage-photo figcaption{font-size:6px;margin-top:8px;letter-spacing:0}
 .story-collage-photo:nth-child(even){margin-top:20px}
 .story-scroll-tools{gap:12px;flex-wrap:wrap;margin-top:28px}
 .story-scroll-hint{font-size:7px;gap:8px}
 .story-motion-toggle{font-size:8px;padding:10px 12px}
 .story-scroll-active .story-collage-stage{padding:0;margin:0}
 .story-scroll-active .story-collage-stage h2{width:92%;font-size:clamp(34px,8.7vw,55px);top:49%}
 .story-scroll-active .story-collage-photo.story-photo{width:41vw;max-width:235px;min-width:130px;margin:0}
 .story-scroll-active .story-scroll-tools{bottom:18px;left:20px;right:20px;flex-wrap:nowrap}
 .story-scroll-active .story-collage-stage .orbit-one{width:74vw;height:74vw}
 .story-scroll-active .story-collage-stage .orbit-two{width:130vw;height:130vw}
 .story-scroll-active .story-collage-stage h2::before{inset:-35% -15%;background:radial-gradient(ellipse,#f2f0e6e6 0%,#f2f0e68c 30%,#f2f0e600 70%)}
 .story-progress{width:40px!important}
}

@media(prefers-reduced-motion:reduce){
 .story-collage-photo.story-photo{transform:rotate(var(--photo-tilt));transition:none}
}