*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#171912;color:#f5f1e7;font-family:Manrope,sans-serif}.experience{position:relative;isolation:isolate;width:100%;height:100%;height:100dvh;overflow:hidden;background:#151710}.backdrop{position:absolute;inset:-8%;background:url('family-photo.jpg') center/cover;filter:blur(30px) brightness(.54) saturate(.75);transform:scale(1.1)}#world{position:absolute;inset:0;width:100%;height:100%;z-index:1}.photo-scene{position:absolute;inset:-3%;width:106%;height:106%;z-index:2;opacity:0;transform:scale(1.08) translate3d(var(--px,0px),var(--py,0px),0);transition:opacity 1.5s cubic-bezier(.22,1,.36,1),transform 1.6s cubic-bezier(.22,1,.36,1);pointer-events:none}.story-tint{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:linear-gradient(0deg,rgba(20,22,14,.72),transparent 48%),linear-gradient(180deg,rgba(15,20,14,.28),transparent 25%);transition:opacity 1.5s}.vignette{position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 160px 24px rgba(10,14,8,.42)}.brand{position:absolute;top:40px;left:48px;z-index:6;display:flex;align-items:center;gap:12px;font-size:10px;font-weight:600;letter-spacing:.17em;text-shadow:0 2px 10px #000}.brand-symbol{font-size:31px;font-weight:400;line-height:1}.brand small{display:block;margin-top:5px;font-size:8px;font-weight:400;letter-spacing:.27em}.intro-ui{position:absolute;inset:0;z-index:5;transition:opacity .6s cubic-bezier(.22,1,.36,1)}.intro-note{position:absolute;right:48px;top:42px;font-size:9px;line-height:1.7;letter-spacing:.18em;text-align:right}.intro-foot{position:absolute;left:48px;right:48px;bottom:38px;font-size:9px;letter-spacing:.18em;display:flex;justify-content:space-between}.shutter-control{position:absolute;left:75%;top:35%;display:flex;align-items:center;gap:16px;transform:translate(-50%,-50%);white-space:nowrap}.shutter-control button{width:54px;height:54px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.12);box-shadow:0 0 0 7px rgba(255,255,255,.12),0 0 28px rgba(255,241,213,.5);cursor:pointer;transition:transform .4s cubic-bezier(.22,1,.36,1),background .4s}.shutter-control button:hover{transform:scale(1.1);background:rgba(255,255,255,.3)}.shutter-control button:focus-visible,#back:focus-visible{outline:2px solid white;outline-offset:5px}.shutter-control button span{display:block;width:12px;height:12px;border-radius:50%;background:#fff;margin:auto}.shutter-copy{padding:8px 12px;background:rgba(18,22,15,.55);backdrop-filter:blur(8px);border-radius:2px}.shutter-copy span{display:block;font-size:8px;letter-spacing:.15em}.shutter-copy strong{display:block;margin-top:5px;font-size:13px;font-weight:600}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;letter-spacing:.18em;white-space:nowrap}#loading span{display:inline-block;font-size:20px;animation:spin 4s infinite linear}.ready #loading{display:none}.intro-ui .shutter-control{opacity:0}.ready .intro-ui .shutter-control{opacity:1}.story{position:absolute;inset:0;z-index:5;opacity:0;visibility:hidden;transition:opacity 2s cubic-bezier(.22,1,.36,1);pointer-events:none}.story button{pointer-events:auto}#back{position:absolute;right:48px;top:40px;background:none;color:white;border:0;cursor:pointer;font-size:26px;display:flex;gap:12px;align-items:center}#back span{font:500 9px Manrope,sans-serif;letter-spacing:.16em}.page-edge{position:absolute;width:40px;height:40px;opacity:.5}.top-left{top:112px;left:48px;border-top:1px solid #e4d9bd;border-left:1px solid #e4d9bd}.top-right{top:112px;right:48px;border-top:1px solid #e4d9bd;border-right:1px solid #e4d9bd}.bottom-left{bottom:38px;left:48px;border-bottom:1px solid #e4d9bd;border-left:1px solid #e4d9bd}.bottom-right{bottom:38px;right:48px;border-bottom:1px solid #e4d9bd;border-right:1px solid #e4d9bd}.chapter{position:absolute;left:50%;bottom:6%;transform:translate(-50%,16px);text-align:center;width:min(90%,620px);color:#fff9e9;text-shadow:0 2px 22px rgba(0,0,0,.8);opacity:0;transition:opacity 2s 1s,transform 2s 1s cubic-bezier(.22,1,.36,1)}.chapter-star{font-size:21px}.chapter-label{font-size:9px;letter-spacing:.3em;margin:12px 0}.chapter p{font:500 clamp(26px,3.3vw,48px)/1.1 'Cormorant Garamond',serif;letter-spacing:.01em;margin:16px 0;text-wrap:balance}.chapter-rule{width:42px;height:1px;background:#ded5c2;margin:20px auto 12px}.chapter-page{font:500 13px 'Cormorant Garamond',serif}.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff0b9;box-shadow:0 0 12px 4px #f7d994;opacity:.5;animation:drift 9s infinite alternate cubic-bezier(.22,1,.36,1)}.dust i:nth-child(1){left:12%;top:30%}.dust i:nth-child(2){left:30%;top:20%;animation-delay:-3s}.dust i:nth-child(3){left:75%;top:30%;animation-delay:-6s}.dust i:nth-child(4){left:84%;top:60%;animation-delay:-2s}.dust i:nth-child(5){left:20%;top:70%;animation-delay:-5s}.dust i:nth-child(6){left:63%;top:12%;animation-delay:-4s}.experience[data-state="flight"] .intro-ui,.experience[data-state="story"] .intro-ui{opacity:0;pointer-events:none}.experience[data-state="story"] .photo-scene{opacity:1;transform:scale(1) translate3d(var(--px,0px),var(--py,0px),0)}.experience[data-state="story"] .story-tint{opacity:1}.experience[data-state="story"] .story{visibility:visible;opacity:1}.experience[data-state="story"] .chapter{opacity:1;transform:translate(-50%,0)}#error{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);padding:20px;background:#1f211c;font-size:14px;text-align:center}@keyframes drift{from{transform:translate3d(0,0,0);opacity:.1}to{transform:translate3d(24px,-45px,0);opacity:.6}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:700px){.brand{top:24px;left:24px}.intro-note{display:none}.intro-foot{left:24px;right:24px;bottom:24px;font-size:8px}.shutter-control{gap:8px}.shutter-control button{width:44px;height:44px}.shutter-copy{padding:8px}.shutter-copy span{font-size:7px}.shutter-copy strong{font-size:11px}.photo-background,.photo-people{background-position:center}.chapter{bottom:8%}.chapter p{font-size:30px}.top-left,.bottom-left{left:24px}.top-right,.bottom-right{right:24px}.top-left,.top-right{top:90px}.bottom-left,.bottom-right{bottom:24px}#back{top:22px;right:24px}#back span{display:none}.vignette{box-shadow:inset 0 0 90px 8px rgba(10,14,8,.4)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.shutter-control{transform:translate(-27px,-50%)} @media(max-width:700px){.shutter-control{transform:translate(-22px,-50%)}}

.photo-background,.photo-people{position:absolute;inset:-2%;background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform 1.3s cubic-bezier(.22,1,.36,1);will-change:transform}.photo-background{background-image:url('family-background-composite.jpg');transform:translate3d(calc(var(--px, 0px)*-.45),calc(var(--py, 0px)*-.45),0) scale(1.025)}.photo-people{background-image:url('family-people.png');transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.025)}

.shutter-control{flex-direction:row-reverse;transform:translate(calc(-100% + 27px),-50%)} @media(max-width:700px){.shutter-control{transform:translate(calc(-100% + 22px),-50%)}}

/* The visible controls follow the photographed hardware as the camera moves. */
.camera-hotspots{position:absolute;inset:0;pointer-events:none}.camera-control,.camera-control.shutter-control{position:absolute;display:block;width:var(--spot-size,44px);height:var(--spot-size,44px);transform:translate(-50%,-50%);pointer-events:none;white-space:normal}.camera-control .camera-button,.camera-control.shutter-control button{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;pointer-events:auto;transition:transform .24s cubic-bezier(.22,1,.36,1),background .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),border-color .24s cubic-bezier(.22,1,.36,1)}.camera-control .camera-button:hover,.camera-control .camera-button:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.8);box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 24px rgba(255,241,213,.55);outline:none}.camera-control .camera-button:active,.camera-control .camera-button.is-pressed{transform:translateY(2px) scale(.90);background:rgba(0,0,0,.35);box-shadow:inset 0 4px 9px rgba(0,0,0,.72),0 0 0 2px rgba(255,255,255,.45)}.camera-control .button-glint{position:absolute;inset:18%;display:block;width:auto;height:auto;border-radius:50%;margin:0;background:transparent;transition:background .24s cubic-bezier(.22,1,.36,1)}.camera-control .camera-button.is-pressed .button-glint{background:rgba(0,0,0,.18)}.camera-control .shutter-button{border-color:rgba(255,255,255,.8);box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 24px rgba(255,241,213,.5);animation:shutterPulse 2.8s infinite cubic-bezier(.22,1,.36,1)}.camera-control .shutter-button.is-pressed{animation:none}.camera-control .shutter-copy,.camera-tooltip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:8px 12px;background:rgba(18,22,15,.82);backdrop-filter:blur(8px);border-radius:2px;pointer-events:none;white-space:nowrap}.camera-control .shutter-copy span{display:block;font-size:8px;letter-spacing:.15em}.camera-control .shutter-copy strong{display:block;font-size:13px;font-weight:600;margin-top:5px}.camera-tooltip{opacity:0;font-size:12px;font-weight:600;transform:translate(8px,-50%);transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1);z-index:2}.camera-control:has(.nav-button:hover) .camera-tooltip,.camera-control:has(.nav-button:focus-visible) .camera-tooltip{opacity:1;transform:translate(0,-50%)}.intro-ui .camera-hotspots{opacity:0}.ready .intro-ui .camera-hotspots{opacity:1}.touch-nav{display:none}.book-dialog{border:0;padding:0;background:transparent;color:#2e2920;width:min(90vw,560px);max-width:none;max-height:min(85vh,760px);overflow:auto}.book-dialog::backdrop{background:rgba(9,12,8,.75);backdrop-filter:blur(9px)}.book-card{position:relative;background:#eee6d4;color:#2c2821;padding:64px;min-height:380px;box-shadow:0 24px 80px rgba(0,0,0,.45);text-align:center}.book-card::before{content:'';position:absolute;inset:16px;border:1px solid rgba(88,72,51,.28);pointer-events:none}.book-close{position:absolute;right:24px;top:20px;border:0;background:transparent;color:#453d30;font:400 32px/1 Manrope,sans-serif;cursor:pointer;transition:transform .24s cubic-bezier(.22,1,.36,1)}.book-close:hover{transform:rotate(90deg)}.book-close:focus-visible,.story-link:focus-visible,.touch-nav button:focus-visible{outline:2px solid #8a6944;outline-offset:4px}.book-ornament{font-size:25px}.book-kicker{font:600 9px/1.5 Manrope,sans-serif;letter-spacing:.2em;margin:16px 0 24px}.book-card h2{font:500 48px/1 'Cormorant Garamond',serif;letter-spacing:-.02em;margin:0 0 24px}.book-card section>p{font:500 22px/1.35 'Cormorant Garamond',serif;max-width:390px;margin:0 auto 16px;text-wrap:pretty}.book-card section>.book-note{font:400 11px/1.6 Manrope,sans-serif;color:#756b5b;margin-top:32px}.book-page-number{display:block;margin-top:32px;color:#a99472}.story-link{border:1px solid #8f806c;background:transparent;color:#30291f;font:600 12px/1.4 Manrope,sans-serif;cursor:pointer;padding:12px 16px;margin-top:16px;transition:transform .24s cubic-bezier(.22,1,.36,1),background .24s cubic-bezier(.22,1,.36,1)}.story-link:hover{background:#ded1ba}.story-link:active{transform:scale(.96)}.story-link span{margin-left:8px}@keyframes shutterPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.13),0 0 18px rgba(255,241,213,.38)}50%{box-shadow:0 0 0 9px rgba(255,255,255,.04),0 0 28px rgba(255,241,213,.65)}}
@media(max-width:700px){.camera-control .shutter-copy{right:calc(100% + 8px);padding:8px}.camera-control .shutter-copy strong{font-size:11px}.camera-tooltip{display:none}.touch-nav{position:absolute;left:24px;right:24px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1)}.ready .touch-nav{opacity:1}.touch-nav span{width:100%;text-align:center;font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.7)}.touch-nav button{border:1px solid rgba(255,255,255,.28);background:rgba(19,22,15,.5);color:#fff;padding:6px 8px;font:500 10px/1.4 Manrope,sans-serif;cursor:pointer}.touch-nav button:active,.touch-nav button.is-pressed{transform:scale(.95);background:rgba(255,255,255,.18)}.book-card{padding:48px 32px;min-height:0}.book-card h2{font-size:36px}.book-card section>p{font-size:20px}.book-kicker{margin:12px 0 24px}}
@media(prefers-reduced-motion:reduce){.camera-control .shutter-button{animation:none}}
.camera-control .camera-button::before{content:'';position:absolute;inset:0;border-radius:50%;background-image:url('camera-photo.png');background-repeat:no-repeat;background-size:var(--image-width) var(--image-height);background-position:var(--patch-x) var(--patch-y);opacity:0;box-shadow:inset 0 3px 8px rgba(0,0,0,.6);pointer-events:none;transition:opacity .2s cubic-bezier(.22,1,.36,1)}.camera-control .camera-button:active::before,.camera-control .camera-button.is-pressed::before{opacity:1}.experience[data-state="flight"] .intro-ui{transition-duration:.2s}
.experience[data-state="flight"] .intro-ui{transition-duration:.1s}
/* The shutter cap is a separate scene element: it travels down behind the dial lip. */
.camera-control .shutter-button::before{display:none}.camera-control .shutter-button:active,.camera-control .shutter-button.is-pressed{transform:none;background:transparent;box-shadow:0 0 0 2px rgba(255,255,255,.25);border-color:rgba(255,255,255,.35)}.camera-control .shutter-button .button-glint{display:none}
/* Keep the shutter surface visually attached; only keyboard focus draws an outline. */
.camera-control .shutter-button,.camera-control .shutter-button:hover,.camera-control .shutter-button:active,.camera-control .shutter-button.is-pressed{background:transparent;border-color:transparent;box-shadow:none;animation:none}.camera-control .shutter-button:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:3px}
.photo-scene{transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.3s cubic-bezier(.22,1,.36,1)}