:root{color-scheme:dark;--ink:#080909;--ivory:#ede7da;--muted:#b6b4ac;--gold:#c6aa75;--p:0;--spread:0;--turn:-18deg;--tilt:4deg;--rise:0px;--scale:1;--intro:1;--middle:0;--final:0;--hand:1;--object:1;--world:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--ivory);font-family:Manrope,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:7px}button{background:none;border:0}::selection{background:#c6aa75;color:#080909}.skip{position:fixed;top:-100px;left:20px;padding:14px;background:var(--ivory);color:var(--ink);z-index:20}.skip:focus{top:10px}.header{position:fixed;z-index:10;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:28px 4.4%;background:linear-gradient(#08090980,transparent)}.logo{font:500 43px/.9 'Cormorant Garamond',Georgia,serif;letter-spacing:-2px}.logo span{font:10px Manrope;vertical-align:top;display:inline-block;margin:3px 0 0 5px;letter-spacing:0}.header-note{font-size:10px;letter-spacing:2.7px;color:#c8c4ba}.contact{border:1px solid #ede7da55;border-radius:50px;padding:13px 21px;font-size:12px;display:flex;gap:28px;align-items:center;transition:background .25s,border-color .25s}.contact:hover{background:#ede7da12;border-color:var(--ivory)}.contact span{font-size:17px}
#experience{height:380svh}.stage{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;isolation:isolate}.visual{position:absolute;inset:0;pointer-events:none}.hand{position:absolute;inset:0;background:url('assets-hand.webp') center/cover no-repeat;opacity:var(--hand);transform:scale(calc(1 + var(--p)*.13)) translateY(calc(var(--p)*60px));transform-origin:70% 70%;will-change:transform,opacity}.world{position:absolute;inset:0;background:url('assets-world.webp') center/cover no-repeat;opacity:var(--world);transform:scale(calc(1.16 - var(--world)*.16));will-change:opacity,transform}.halo{position:absolute;width:min(46vw,660px);aspect-ratio:1;top:8%;left:45%;border:1px solid #d7b4788c;border-radius:50%;box-shadow:0 0 12px #f5d89c22,inset 0 0 10px #f5d89c13;opacity:var(--hand);transform:rotate(calc(var(--p)*45deg)) scale(calc(1 + var(--p)*.14));background:radial-gradient(ellipse at center,#bf94550a 0%,transparent 70%)}.halo:before,.halo:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#f7e5bc;box-shadow:0 0 15px 3px #e5b86980;top:15%;left:14%}.halo:after{top:83%;left:85%;width:3px;height:3px}.halo i{position:absolute;inset:-11px;border:1px solid #d7b47812;border-radius:50%}.aura{position:absolute;width:47%;height:60%;left:44%;top:6%;background:radial-gradient(ellipse,#b78e4220,transparent 65%);opacity:var(--hand)}.vignette{position:absolute;inset:0;background:linear-gradient(90deg,#080909a0,transparent 52%),linear-gradient(0deg,#080909c9,transparent 18%,transparent 85%,#08090930);pointer-events:none}.grain{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")}
.scene{position:absolute;left:66%;top:42%;width:300px;height:370px;perspective:1100px;transform:translate(-50%,-50%) translateY(var(--rise)) scale(var(--scale));opacity:var(--object);will-change:transform,opacity}.creation{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--tilt)) rotateY(var(--turn)) rotateZ(-5deg)}.page{position:absolute;inset:0;backface-visibility:visible;transform-style:preserve-3d;border:1px solid #f9ebcb8c;box-shadow:0 0 24px #ebcf8620;overflow:hidden}.layer.back{background:linear-gradient(130deg,#d9d1be,#fbf1da 45%,#a69d8b);transform:translateZ(calc(-3px - var(--spread)*140px))}.orbit{width:230px;height:230px;border:1px solid #5f5a4355;border-radius:50%;position:absolute;left:32px;top:70px;box-shadow:inset 10px 10px 30px #fff7e4}.page-caption{position:absolute;bottom:30px;left:25px;font-size:8px;color:#5e584b;letter-spacing:3px}.layer.grid{background:#e3d8bd08;transform:translateZ(calc(var(--spread)*-65px));border-color:#e5d1a244}.grid-lines{position:absolute;inset:0;background-image:linear-gradient(#e6d3a628 1px,transparent 1px),linear-gradient(90deg,#e6d3a628 1px,transparent 1px);background-size:35px 35px}.layer.sculpture{transform:translateZ(calc(2px + var(--spread)*25px));border:0;overflow:visible;box-shadow:none}.sphere{position:absolute;left:97px;top:129px;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff9e8 0%,#e5dfcf 20%,#9c9586 50%,#322f27 77%,#a99a7b 100%);box-shadow:14px 18px 32px #0006,inset -5px -5px 15px #43392e;transform:translateZ(30px)}.sculpture-ring{position:absolute;width:220px;height:220px;left:40px;top:73px;border:27px solid #d2ccbc;border-radius:50%;box-shadow:inset 4px 7px 11px #fff9df,7px 7px 10px #0007,-3px -4px 5px #fff3ca;transform:rotateY(48deg) rotateX(25deg);background:transparent}.sculpture-ring.two{transform:rotateY(-55deg) rotateX(-25deg);border-width:13px;left:61px;top:96px;width:180px;height:180px;border-color:#a39c8a}.layer.glass{background:linear-gradient(125deg,#fff4d718,#fff9ea03 60%,#efd6a32b);transform:translateZ(calc(4px + var(--spread)*110px));border-color:#fff1c569}.small-number{position:absolute;right:20px;top:25px;color:#766c55;font-size:9px;letter-spacing:2px}.glass-line{position:absolute;left:22px;right:22px;bottom:52px;height:1px;background:#f1dfb84a}.layer.front{transform:translateZ(calc(6px + var(--spread)*195px));color:#25261f;background:linear-gradient(120deg,#f7ecd21a,transparent);padding:22px;box-shadow:1px 1px 2px #fff8dd}.mini-nav{display:flex;justify-content:space-between;align-items:center;font-size:5px;letter-spacing:1px}.mini-logo{font:29px 'Cormorant Garamond',Georgia,serif;letter-spacing:-1px}.page-word{position:absolute;left:23px;bottom:49px;font:43px/.82 'Cormorant Garamond',Georgia,serif;letter-spacing:-2px;text-shadow:0 1px 8px #fff6dfb0}.page-word em{font-weight:400}.page-bottom{position:absolute;left:24px;right:24px;bottom:18px;display:flex;justify-content:space-between;font-size:5px;line-height:1.6;letter-spacing:1px}.page-bottom>span:last-child{font-size:20px}
.copy{position:absolute;z-index:2;left:7.2%;top:28%;width:45%;pointer-events:none;will-change:opacity,transform}.eyebrow{font-size:10px;letter-spacing:2.8px;display:flex;gap:12px;align-items:center;color:#c9c4b8}.eyebrow>span{width:23px;height:1px;background:var(--gold)}h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:.95;letter-spacing:-3.5px;margin:29px 0 26px;font-size:clamp(62px,6.8vw,118px)}h1 em,h2 em{font-weight:400;color:#e0d2b6}p{font-size:14px;line-height:1.9;color:#bfbdb5;letter-spacing:.1px}.intro{opacity:var(--intro);transform:translateY(calc((1 - var(--intro))*-25px))}.author-line{display:flex;align-items:center;gap:14px;margin-top:38px;font-size:10px;line-height:1.7;color:#b8b4a9}.author-mark{width:35px;height:35px;border:1px solid #d9c59e40;display:grid;place-items:center;border-radius:50%;font:23px 'Cormorant Garamond';color:#e5d8ba}.middle{opacity:var(--middle);transform:translateY(calc((1 - var(--middle))*30px));top:24%}.middle h2{font-size:clamp(70px,7.2vw,120px)}.final{left:60%;width:37%;top:26%;opacity:var(--final);transform:translateY(calc((1 - var(--final))*25px))}.final h2{font-size:clamp(62px,5.8vw,100px)}.primary{display:inline-flex;justify-content:space-between;align-items:center;gap:40px;background:var(--ivory);color:#24251f;border-radius:2px;padding:18px 24px;font-size:13px;pointer-events:auto;transition:background .2s,transform .2s}.primary:hover{background:#fff7e8;transform:translateY(-2px)}.primary>span{font-size:20px}.final .primary{margin-top:20px}.personal{display:block;font-size:8px;letter-spacing:2px;margin-top:17px;color:#a8a393}.scene-footer{position:absolute;z-index:5;bottom:29px;left:4.4%;right:4.4%;display:flex;justify-content:space-between;align-items:center}.scroll-cue{display:flex;align-items:center;gap:15px;font-size:8px;letter-spacing:2px;padding:10px 0}.scroll-line{height:31px;width:1px;background:linear-gradient(transparent,#c8ad7b);position:relative}.scroll-line:after{content:'';position:absolute;bottom:0;left:-2px;width:4px;height:4px;border-bottom:1px solid #c8ad7b;border-right:1px solid #c8ad7b;transform:rotate(45deg)}.chapters{display:flex;align-items:center;gap:10px}.chapters button{font-size:11px;color:#817e75;padding:12px 7px;transition:color .2s}.chapters .active{color:#e7d3a8}.chapters i{width:25px;height:1px;background:#86745440}.motion{font-size:8px;letter-spacing:1.4px;padding:12px 0;color:#8d8c84}.motion span{color:#d6c8ac;margin-left:10px}.progress{position:absolute;bottom:0;height:1px;left:0;background:#d9bd88;transform-origin:left;width:100%;transform:scaleX(var(--p));box-shadow:0 0 8px #d9bd88}
dialog{background:#111310;color:var(--ivory);border:1px solid #c1a36b55;padding:55px;max-width:560px;width:calc(100% - 32px)}dialog::backdrop{background:#000b;backdrop-filter:blur(9px)}dialog h2{font-size:64px}dialog p{font-size:14px}.close{position:absolute;right:17px;top:12px;font-size:28px;color:#afa994}.dialog-back{display:block;margin-top:25px;border-bottom:1px solid #9d8e6b;padding:6px 0;font-size:12px}[hidden]{display:none!important}.motion-off .scene,.motion-off .hand,.motion-off .world,.motion-off .halo{transform:none}.motion-off .scene{transform:translate(-50%,-50%)}
@media(min-width:1800px){.scene{width:360px;height:444px}.creation{zoom:1.2;width:300px;height:370px}.copy{top:30%}}
@media(max-width:900px){.header-note{display:none}.copy{left:6%;width:49%}h1,h2{font-size:68px}.scene{left:70%;width:250px;height:310px}.creation{width:300px;height:370px;transform:scale(.84) rotateX(var(--tilt)) rotateY(var(--turn)) rotateZ(-5deg);transform-origin:top left}.final{left:53%;width:43%}.final h2{font-size:62px}.halo{left:43%;top:20%;width:55vw}.author-line{margin-top:25px}}
@media(max-width:600px){.header{padding:22px 6%}.logo{font-size:36px}.contact{padding:10px 14px;font-size:10px;gap:18px}.contact span{font-size:15px}.stage{min-height:640px}.copy{left:7%;top:17%;width:89%}.eyebrow{font-size:8px;letter-spacing:2px}h1,h2{font-size:clamp(53px,12.8vw,77px);letter-spacing:-2.3px;margin:20px 0 14px}.copy p{font-size:12px;line-height:1.7}.author-line{display:none}.hand{background-size:auto 80%;background-position:62% bottom;transform:scale(calc(1 + var(--p)*.08))}.halo{width:77vw;left:24%;top:41%;opacity:calc(var(--hand)*.65)}.aura{left:25%;top:38%;width:75%;height:50%}.scene{left:67%;top:64%;width:174px;height:216px}.creation{transform:scale(.58) rotateX(var(--tilt)) rotateY(var(--turn)) rotateZ(-5deg)}.middle{top:17%}.middle h2{font-size:62px}.middle p{display:none}.final{left:7%;top:22%;width:90%}.final h2{font-size:64px}.final p{font-size:13px}.final .primary{margin-top:18px;padding:16px 20px}.personal{font-size:8px}.world{background-position:30% center;filter:brightness(.62)}.vignette{background:linear-gradient(180deg,#08090920,transparent 45%,#08090970),linear-gradient(90deg,#08090950,transparent 70%)}.scene-footer{left:6%;right:6%;bottom:22px}.scroll-label{font-size:7px;letter-spacing:1.1px;max-width:110px;text-align:left;line-height:1.6}.scroll-cue{gap:10px}.motion{font-size:7px;letter-spacing:0}.motion span{margin-left:4px}.chapters{gap:2px}.chapters i{width:12px}.chapters button{font-size:10px;padding:10px 4px}dialog{padding:40px 25px}dialog h2{font-size:55px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}