/* COMET × MILKY WAY: LACE THE STORY */
@font-face{font-family:"Space Grotesk";font-weight:300;font-display:swap;src:url(assets/fonts/SpaceGrotesk-Light.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:400;font-display:swap;src:url(assets/fonts/SpaceGrotesk-Regular.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(assets/fonts/SpaceGrotesk-Medium.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(assets/fonts/SpaceGrotesk-Bold.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:400;font-display:swap;src:url(assets/fonts/Montserrat-Regular.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-display:swap;src:url(assets/fonts/Montserrat-Medium.woff2) format("woff2")}

:root{
  --black:#000;--grey:#F2F1F0;--blue:#2765FA;--berry:#EF426F;--yellow:#EAEF29;
  --sg:"Space Grotesk",system-ui,sans-serif;--mo:"Montserrat",system-ui,sans-serif;
  --gut:clamp(18px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#000;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:#000;color:var(--grey);font-family:var(--mo);font-weight:400;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2{font-family:var(--sg);font-weight:700;line-height:.9;letter-spacing:-.045em}
.w3{font-weight:300}.w7{font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
section{position:relative}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* grain, shared */
.grain,.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center}
.ld-svg{width:min(78vw,640px);overflow:visible}
.ld-eyes circle{fill:none;stroke:#F2F1F0;stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center}
.ld-lace{fill:none;stroke:#F2F1F0;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ld-logo{position:absolute;width:min(52vw,340px);opacity:0}
#loader.done{display:none}

/* ---------- chrome ---------- */
.brand{color:var(--grey);text-decoration:none;position:fixed;z-index:60;left:var(--gut);top:clamp(14px,2.6vh,26px);display:flex;align-items:center;gap:12px;opacity:0;transition:opacity .6s}
.brand img.b-comet{height:19px;width:auto}.brand img.b-mw{height:28px;width:auto}
.brand i{font-style:normal;font-family:var(--sg);font-weight:300;font-size:14px;color:var(--grey);opacity:.7;text-decoration:none}
.brand::before{content:"";position:absolute;inset:-18px -34px;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);pointer-events:none;z-index:-1}
body.ready .brand{opacity:1}
body.ready.gal-on #place{opacity:.45}
body.ready.lk-on .brand,body.ready.brand-off .brand{opacity:0;pointer-events:none}

#place{position:fixed;z-index:60;right:clamp(14px,1.6vw,28px);top:50%;height:min(52vh,420px);transform:translateY(-50%);width:20px;opacity:0;transition:opacity .6s}
body.ready #place{opacity:1}
#place .cord{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(242,241,240,.22);border-radius:2px;overflow:hidden}
#place .cord-fill{position:absolute;inset:0;background:var(--grey);transform:scaleY(0);transform-origin:top}
#place.all .cord-fill{background:linear-gradient(180deg,var(--blue),var(--berry),var(--yellow),var(--blue));background-size:100% 300%;animation:run 1.4s linear infinite}
@keyframes run{to{background-position:0 -300%}}
.eye{position:absolute;left:50%;top:var(--y);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(242,241,240,.6);background:rgba(0,0,0,.25);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 10px rgba(0,0,0,.6);transition:background .5s,border-color .5s,box-shadow .5s,transform .4s cubic-bezier(.2,.9,.3,1.4)}
.eye::after{content:"";position:absolute;inset:-12px}
.eye.lit{background:var(--c);border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent),0 0 16px color-mix(in srgb,var(--c) 80%,transparent)}
.eye.now{transform:scale(1.35)}
.eye:hover,.eye:focus-visible{transform:scale(1.3);border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent),0 0 14px rgba(0,0,0,.6)}
#place::before{content:"";position:absolute;inset:-14px -22px;background:radial-gradient(closest-side,rgba(0,0,0,.38),transparent);pointer-events:none;z-index:-1}
#place.all .eye{background:conic-gradient(var(--blue),var(--berry),var(--yellow),var(--blue));border-color:var(--grey);box-shadow:0 0 14px rgba(239,66,111,.7)}

#sound{position:fixed;z-index:60;right:clamp(12px,1.4vw,24px);bottom:clamp(12px,2.4vh,24px);width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(242,241,240,.45);display:grid;place-items:center;color:var(--grey);background:rgba(0,0,0,.35);backdrop-filter:blur(6px);opacity:0;transition:opacity .6s,border-color .3s,color .3s}
body.ready #sound{opacity:1}
#sound .x{opacity:0}#sound .w1,#sound .w2{opacity:1}
#sound[aria-pressed=false] .w1,#sound[aria-pressed=false] .w2{opacity:0}#sound[aria-pressed=false] .x{opacity:1}
#sound:hover{border-color:var(--grey);background:rgba(0,0,0,.55)}
#sound[aria-pressed=true]{border-color:var(--yellow);color:var(--yellow)}

#cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:0;height:0;display:none;opacity:0;transition:opacity .3s}
#cursor.on{opacity:1}
.fine #cursor{display:block}
.fine,.fine a,.fine button{cursor:none}
#cursor span{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--grey);mix-blend-mode:difference;display:grid;place-items:center;font:500 11px/1 var(--mo);color:#000;letter-spacing:.02em;transition:width .35s cubic-bezier(.2,.9,.3,1),height .35s cubic-bezier(.2,.9,.3,1),margin .35s cubic-bezier(.2,.9,.3,1),background .25s}
#cursor[data-s=link] span{width:36px;height:36px;margin:-18px 0 0 -18px;background:transparent;border:1.5px solid var(--grey);mix-blend-mode:normal}
/* Drag and Pull are filled discs, so the word reads on any picture */
#cursor[data-s=pull] span,#cursor[data-s=drag] span{width:68px;height:68px;margin:-34px 0 0 -34px;mix-blend-mode:normal;border:0;font:500 13px/1 var(--mo);letter-spacing:.02em;box-shadow:0 6px 24px rgba(0,0,0,.45)}
#cursor[data-s=drag] span{background:var(--yellow);color:#000}
#cursor[data-s=pull] span{background:var(--cbg,var(--blue));color:var(--cfg,var(--grey));text-shadow:var(--csh,0 1px 8px rgba(0,0,0,.45))}
#cursor[data-s=hot] span{width:30px;height:30px;margin:-15px 0 0 -15px;mix-blend-mode:normal;background:transparent;border:1.5px solid var(--berry)}
.fine .grab:hover::after{display:none}
html.lace-drag #cursor{opacity:0}

.flash-d{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at var(--fx,50%) var(--fy,40%),#F2F1F0 0,var(--fc,var(--blue)) 18%,transparent 62%)}
/* light sweep: a skewed band of Light Grey crossing an image */
.sweepbox{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.sweepbox i{position:absolute;top:-12%;bottom:-12%;left:0;width:34%;opacity:0;background:linear-gradient(90deg,rgba(242,241,240,0),rgba(242,241,240,.5) 50%,rgba(242,241,240,0));will-change:transform}

/* shared lace parts */
.lace-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.grab{position:absolute;left:0;top:0;width:88px;height:88px;z-index:7;border-radius:50%;touch-action:none;will-change:transform}
.grab::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:1.5px solid var(--grey);opacity:0;pointer-events:none}
.grab.cue::after{animation:cue 2s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes cue{0%{transform:scale(.55);opacity:.9}70%,100%{transform:scale(1.7);opacity:0}}
.hint{position:absolute;left:0;top:0;z-index:7;pointer-events:none;display:flex;align-items:center;gap:12px;font:300 clamp(19px,1.7vw,28px)/1 var(--sg);letter-spacing:-.02em;color:var(--grey);opacity:0;transition:opacity .8s;white-space:nowrap;will-change:transform;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.hint svg{width:16px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.6s ease-in-out infinite}
.hint.flip{flex-direction:row-reverse}
#heroHint{color:#05071a;text-shadow:none;font-weight:500}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
.hint.show{opacity:1}.hint.gone{opacity:0!important}
.eyelet{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F2F1F0,#b9bcc4 45%,#5b6070);box-shadow:0 0 0 2px rgba(0,0,0,.55),0 1px 6px rgba(0,0,0,.6);z-index:5;margin:-6px 0 0 -6px}

.h-pull{display:flex;flex-direction:column;font-size:clamp(46px,12.2vw,230px)}
.h-pull .n{color:var(--c)}
.h-pull .t{font-weight:300;font-size:.46em;letter-spacing:-.04em;line-height:1;margin-top:.1em;color:var(--grey)}

/* cover box: an element that exactly matches a 16:9 image cover-fitted to its container */
.cb{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(100vw,calc(100vh*1.7917));aspect-ratio:5504/3072}
.cb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pin{position:relative;height:100vh;overflow:hidden;background:#000}
.layer{position:absolute;inset:0;overflow:hidden}

/* ---------- hero ---------- */
#hero{height:100vh;min-height:520px;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(70vw 60vh at 74% 24%,rgba(39,101,250,.95),rgba(39,101,250,0) 72%),
  radial-gradient(95vw 46vh at 55% 112%,rgba(255,112,56,.95),rgba(239,66,111,.38) 48%,rgba(0,0,0,0) 78%),
  linear-gradient(180deg,#020412 0%,#0a1a86 34%,#3b2a86 68%,#8a3550 100%)}
.hero-glow{position:absolute;left:66vw;bottom:-6vh;width:70vw;height:40vh;translate:-50% 0;background:radial-gradient(closest-side,rgba(190,215,255,.7),rgba(120,170,255,.25) 50%,transparent);filter:blur(12px);opacity:.7}
.plinth{position:absolute;z-index:2;left:35vw;top:calc(100% - 25vh);width:64vw;max-width:none;height:auto;pointer-events:none;user-select:none}
.hero-h{position:absolute;z-index:3;left:var(--gut);top:12vh;font-size:clamp(54px,12.6vw,250px);line-height:.84}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-h .in{display:inline-block;will-change:transform}
.hero-sub{position:absolute;z-index:4;left:var(--gut);bottom:clamp(40px,9vh,90px);font:400 clamp(13px,1.15vw,19px)/1.4 var(--mo);color:var(--grey);max-width:36ch;text-wrap:balance;opacity:0}
.hero-shoe{position:absolute;z-index:4;left:42vw;top:calc(100% - 25vh - 44vh);width:42vw;will-change:transform;transform-origin:50% 60%}
.hero-shoe img{width:100%;height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,20,.5))}
.hero-shoe .eyelet{left:64%;top:38%}
#hero .lace-canvas{z-index:6}

/* ---------- pull one ---------- */
.scene{height:auto}
#pull1 .pin,#pull4 .pin{height:100vh}
.l-k03::before{content:"";position:absolute;inset:-8%;background:url(assets/img/k03-1200.webp) 50% 50%/cover;filter:blur(26px) brightness(.5)}
.l-k03 .cb{--mf:0%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--mf),#000 calc(100% - var(--mf)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--mf),#000 calc(100% - var(--mf)),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 var(--mf),#000 calc(100% - var(--mf)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--mf),#000 calc(100% - var(--mf)),transparent 100%);mask-composite:intersect}
.l-k06{opacity:0}.l-k06 .zoom{position:absolute;inset:0;will-change:transform}
.l-c02{will-change:clip-path;clip-path:inset(0 0 0 100%)}
.c02in{will-change:transform}
.shade{position:absolute;inset:0;pointer-events:none}
.s1{background:linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.25) 38%,transparent 60%,rgba(0,0,0,.4))}
.copy{position:absolute;z-index:4}
.c-one{left:0;right:0;top:0;bottom:0;pointer-events:none}
.c-one .h-pull{position:absolute;left:var(--gut);top:clamp(60px,11vh,110px);font-size:clamp(46px,min(10.6vw,21vh),210px)}
.c-one p{position:absolute;right:calc(var(--gut) + 30px);top:clamp(80px,14vh,150px);width:min(15vw,290px);font-size:clamp(14px,1.2vw,19px);line-height:1.5;color:rgba(242,241,240,.95);text-shadow:0 2px 20px #000}
@media (min-width:761px) and (min-aspect-ratio:1/1){.c-one .h-pull{top:calc(clamp(60px,11vh,110px) - 12px)}}
.c-two{left:var(--gut);bottom:clamp(30px,8vh,80px);max-width:30ch;font:400 clamp(15px,1.5vw,25px)/1.4 var(--mo);opacity:0;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.c-two::before{content:"";position:absolute;inset:-36px -56px -30px -40px;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);z-index:-1}
.pulse{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;mix-blend-mode:screen;opacity:0;filter:saturate(3.4) brightness(4.2) contrast(1.25);--py:-20%;--py2:-20%;
  -webkit-mask-image:linear-gradient(0deg,transparent calc(var(--py) - 22%),#000 var(--py),transparent calc(var(--py) + 22%)),linear-gradient(0deg,transparent calc(var(--py2) - 22%),#000 var(--py2),transparent calc(var(--py2) + 22%));
  mask-image:linear-gradient(0deg,transparent calc(var(--py) - 22%),#000 var(--py),transparent calc(var(--py) + 22%)),linear-gradient(0deg,transparent calc(var(--py2) - 22%),#000 var(--py2),transparent calc(var(--py2) + 22%))}

/* ---------- pull two ---------- */
#pull2 .pin{background:#000}
.p2-h{position:absolute;left:var(--gut);bottom:clamp(40px,9vh,90px);z-index:4;font-size:clamp(46px,min(11.4vw,21vh),215px);pointer-events:none;will-change:transform,opacity;text-shadow:0 4px 50px #000}
.p2-h .t{font-size:.42em}
.map-cb{will-change:transform;--r:0px;--rim:0}
.dimimg{filter:grayscale(1) brightness(.2)}
.litmask{position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle at 50% 47.5%,#000 0,#000 var(--r,0px),transparent calc(var(--r,0px) + 90px));mask-image:radial-gradient(circle at 50% 47.5%,#000 0,#000 var(--r,0px),transparent calc(var(--r,0px) + 90px))}
.litmask img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.55) brightness(1.2) contrast(1.06)}
/* the front of the light: a thin Berry rim races out along the laces */
.rim{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--rim);background:radial-gradient(circle at 50% 47.5%,transparent calc(var(--r,0px) + 22px),rgba(239,66,111,.55) calc(var(--r,0px) + 42px),transparent calc(var(--r,0px) + 62px))}
/* hover spotlight: everything dims except a pool on the shoe and a pool on the symbol */
.spot{position:absolute;inset:0;pointer-events:none;background:rgba(0,0,0,.62);opacity:0;transition:opacity .25s;--sx:50%;--sy:50%;
  -webkit-mask-image:radial-gradient(circle at var(--sx) var(--sy),transparent 0,transparent 100px,#000 230px),radial-gradient(circle at 50% 47.5%,transparent 0,transparent 110px,#000 240px);-webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at var(--sx) var(--sy),transparent 0,transparent 100px,#000 230px),radial-gradient(circle at 50% 47.5%,transparent 0,transparent 110px,#000 240px);mask-composite:intersect}
.spot.on{opacity:1}
/* soft seams: each pinned scene lets go of the frame through a short fade, not a hard edge */
#pull1 .pin::after,#pull4 .pin::after,#pull2 .pin::before,.ex-pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9vh;z-index:3;pointer-events:none;background:linear-gradient(0deg,#000,rgba(0,0,0,.5) 45%,transparent)}
#pull2 .pin::after{content:"";position:absolute;left:0;right:0;top:0;height:10vh;z-index:3;pointer-events:none;background:linear-gradient(180deg,#000,rgba(0,0,0,.55) 40%,transparent)}
.hot:focus-visible{opacity:1;scale:1}
.hot{position:absolute;width:clamp(44px,5.4vw,84px);height:clamp(44px,5.4vw,84px);margin:calc(clamp(44px,5.4vw,84px)/-2) 0 0 calc(clamp(44px,5.4vw,84px)/-2);border-radius:50%;border:1.5px solid var(--berry);background:rgba(239,66,111,0);opacity:0;scale:.5;pointer-events:none;transition:opacity .5s,scale .6s cubic-bezier(.2,.9,.3,1.3),background .25s,box-shadow .25s}
.hot.on{opacity:1;scale:1;pointer-events:auto;animation:ring 2.4s ease-in-out infinite}
.hot.pop{animation:pop .7s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{0%{scale:.4;background:rgba(239,66,111,.8);box-shadow:0 0 0 0 rgba(239,66,111,.9)}55%{scale:1.35;background:rgba(239,66,111,.35);box-shadow:0 0 0 18px rgba(239,66,111,0)}100%{scale:1;background:rgba(239,66,111,0);box-shadow:0 0 0 0 rgba(239,66,111,0)}}
.hot:hover,.hot.open{background:rgba(239,66,111,.22);box-shadow:0 0 0 6px rgba(239,66,111,.18),0 0 26px rgba(239,66,111,.6);animation:none;scale:1.18}
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(239,66,111,.55)}60%{box-shadow:0 0 0 14px rgba(239,66,111,0)}}
.map-copy{position:absolute;left:var(--gut);top:34%;z-index:4;pointer-events:none;max-width:21ch;text-wrap:balance;font:500 clamp(17px,1.75vw,28px)/1.38 var(--mo);color:var(--grey);opacity:0;text-shadow:0 2px 18px #000,0 0 40px #000}
.map-copy.under{opacity:.08!important;transition:opacity .2s}
.map-copy::before{content:"";position:absolute;inset:-40px -60px -40px -70px;background:radial-gradient(closest-side,rgba(0,0,0,.72),transparent);z-index:-1}
.preview{position:fixed;z-index:80;left:0;top:0;width:min(300px,76vw);pointer-events:none;opacity:0;transform:translate3d(0,0,0);background:#000;border-radius:6px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(242,241,240,.12)}
.preview img{width:100%;aspect-ratio:16/10;object-fit:cover}
.preview b{display:block;font:700 22px/1.05 var(--sg);letter-spacing:-.03em;padding:14px 16px 4px}
.preview span{display:block;font:400 14px/1.45 var(--mo);padding:0 16px 16px;color:rgba(242,241,240,.85)}
.pv-veil{position:absolute;inset:0;background:var(--berry);clip-path:inset(0 100% 0 0);pointer-events:none}

/* ---------- pull three ---------- */
.p3-num{position:relative;height:100vh;min-height:520px;display:flex;flex-direction:column;padding:clamp(70px,13vh,120px) calc(var(--gut) + 28px) clamp(28px,6vh,60px) var(--gut);color:var(--yellow);background:#000;overflow:hidden}
.p3-num .h-pull{font-size:clamp(44px,min(10.4vw,21vh),190px);flex:0 0 auto}
.p3-num .eyelet.top{left:80vw;top:8vh}
.nm-row{flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;min-height:0}
.nm{display:flex;flex-direction:column;flex:0 0 auto;font-variant-numeric:tabular-nums}
.nm i{font-style:normal}
.nm b{font:700 min(15.5vw,30vh)/.84 var(--sg);letter-spacing:-.06em;display:block;white-space:nowrap}
.nm span{font:300 clamp(18px,min(3vw,5.4vh),56px)/1.1 var(--sg);letter-spacing:-.03em;margin-top:.45em;padding-bottom:.1em;color:var(--yellow)}
.nm-b{align-items:flex-end;text-align:right}
.nm-arrow{opacity:0;flex:1 1 auto;min-width:0;height:clamp(60px,11vw,190px);margin:0 clamp(10px,2vw,40px);overflow:visible}
.nm-arrow path{fill:none;stroke:var(--yellow);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.p3-gallery{position:relative;height:100vh;overflow:hidden;background:#000;touch-action:pan-y}
.track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:clamp(40px,6vw,110px);padding:0 14vw 0 var(--gut);will-change:transform}
.p3-lead{flex:0 0 0}
.pn{position:relative;flex:0 0 auto;width:clamp(300px,66vw,1500px);height:clamp(250px,56vh,860px);margin-top:-4vh;align-self:center}
.pn.v-full{width:clamp(320px,90vw,2000px);height:clamp(280px,82vh,1000px);margin-top:0}
.pn.v-tall{width:clamp(220px,32vw,680px);height:clamp(300px,74vh,980px);margin-top:0}
.pn.v-sq{width:clamp(260px,42vw,900px);height:clamp(240px,50vh,760px)}
.pn.up{margin-top:-18vh}.pn.down{margin-top:16vh}
.pn .fig{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 100% 0 0);background:#000}
.pn .fig img{position:absolute;max-width:none;left:-7%;top:0;width:114%;height:100%;object-fit:cover;will-change:transform}
.pn .veil{position:absolute;inset:0;background:var(--yellow);clip-path:inset(0 100% 0 0);z-index:2}
.pn .cap{position:absolute;z-index:3;left:-1.2vw;bottom:clamp(14px,2.4vw,40px);max-width:min(54vw,860px);pointer-events:none}
.pn.c-tr .cap{left:auto;bottom:auto;right:clamp(14px,2vw,32px);top:clamp(14px,2.4vw,40px);text-align:right}
.pn.c-br .cap{left:auto;right:clamp(14px,2vw,32px);text-align:right}
.pn.c-tl .cap{bottom:auto;top:clamp(14px,2.4vw,40px)}
.pn.v-tall .cap{max-width:30vw}
.pn .fig::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 48%);pointer-events:none}
.pn.c-tr .fig::after,.pn.c-tl .fig::after{background:linear-gradient(180deg,rgba(0,0,0,.72),transparent 48%)}
.pn .cap h3{font:700 clamp(28px,4.3vw,84px)/1 var(--sg);letter-spacing:-.045em;text-shadow:0 4px 30px rgba(0,0,0,.65)}
.pn.v-tall .cap h3,.pn.v-sq .cap h3{font-size:clamp(26px,3.4vw,66px)}
.pn .cap p{margin-top:1.2vh;font:400 clamp(14px,1.1vw,18px)/1.45 var(--mo);max-width:40ch;color:rgba(242,241,240,.95);text-shadow:0 2px 16px rgba(0,0,0,.6)}
.pn.c-tr .cap p,.pn.c-br .cap p{margin-left:auto}
.pn .cap>*{overflow:hidden}.pn .cap h3{padding-bottom:.16em;margin-bottom:-.16em}.pn .cap h3 span,.pn .cap p span{display:block;will-change:transform}
.p3-bar{position:absolute;left:var(--gut);right:calc(var(--gut) + 64px);bottom:clamp(14px,3.4vh,34px);height:2px;background:rgba(242,241,240,.18)}
.p3-bar i{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left}
.drag-zone{cursor:grab}.fine .drag-zone,.fine .drag-zone *{cursor:none}

/* ---------- pull four ---------- */
#pull4 .pin{background:#000}
.p4-base{filter:brightness(.36) saturate(.8)}
.band{position:absolute;inset:0;z-index:2;-webkit-mask:linear-gradient(#000 0 0) center 50%/100% var(--h,0px) no-repeat;mask:linear-gradient(#000 0 0) center 50%/100% var(--h,0px) no-repeat;will-change:mask-size}
.p4-lit{filter:brightness(3.3) contrast(1.02) saturate(1.45)}
.wash{position:absolute;inset:0;background:var(--grey);mix-blend-mode:screen;opacity:.06}
.msg{position:absolute;left:0;right:0;top:50%;translate:0 -50%;text-align:center;color:#000;font-size:clamp(40px,min(10.4vw,19vh),220px);line-height:.9;letter-spacing:-.05em;font-weight:700}
#pull4 .eyelet.top{left:88vw;top:7vh}
.edge{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--grey);z-index:3;box-shadow:0 0 22px 3px rgba(242,241,240,.85),0 0 90px 14px rgba(242,241,240,.28);opacity:0;will-change:transform}

/* ---------- explorer ---------- */
#explorer{background:#000;overflow:hidden}
.ex-pin{position:relative;height:100vh;overflow:hidden;background:#000}
.ex{position:absolute;overflow:hidden;background:#000;will-change:transform}
.ex img{width:100%;height:100%;object-fit:cover}
.f-m01{inset:0;z-index:0}
.ex-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.45) 34%,transparent 58%);pointer-events:none}
.f-m02{left:var(--gut);top:calc(100vh - 18vw*.5625 - 22px);width:18vw;aspect-ratio:16/9;z-index:2;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.f-c06{left:80vw;top:9vh;width:15.5vw;aspect-ratio:4/3;z-index:3;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.f-c13{left:76vw;top:56vh;width:18vw;aspect-ratio:16/10;z-index:4;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ex-copy{position:absolute;left:var(--gut);top:10vh;z-index:5;width:min(46vw,760px)}
.ex-copy h2{font-size:clamp(44px,min(10vw,19vh),200px);display:flex;flex-direction:column;text-shadow:0 6px 50px rgba(0,0,0,.6);line-height:.92}
.ex-copy h2 span{display:block;padding-bottom:.06em}
.ex-copy h2 .w3{font-size:.5em;line-height:1;margin-bottom:.12em}
.ex-copy p{margin-top:2vh;max-width:34ch;font-size:clamp(14px,1.2vw,20px);color:var(--grey);text-shadow:0 2px 18px #000}

/* ---------- shoe ---------- */
#shoe{background:#000}
.sh-pin{position:relative;height:100vh;overflow:hidden;background:#000}
.moon{position:absolute;left:46vw;top:50%;width:84vh;height:84vh;margin-top:-42vh;opacity:.5;z-index:1;will-change:transform;filter:drop-shadow(0 0 46px rgba(39,101,250,.55))}
.moon img{width:100%;height:100%;animation:spin 140s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sh-pin{--pw:min(calc(92vh*.74),42vw)}
.sh-photos{position:absolute;left:0;top:4vh;height:92vh;width:var(--pw);z-index:2;background:#000}
.sh-photos figure{position:absolute;inset:0;overflow:hidden;clip-path:inset(100% 0 0 0)}
.sh-photos figure:first-child{clip-path:inset(0)}
.sh-photos img{width:100%;height:100%;object-fit:cover}
.sh-photos img.heel{object-position:50% 50%}
.sh-text{position:absolute;z-index:3;left:calc(var(--pw) + 5vw);right:calc(var(--gut) + 28px);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.sh-h{font-size:clamp(40px,min(9.6vw,calc((100vw - var(--pw) - 12vw)/5.6)),160px);line-height:.86;text-shadow:0 4px 40px #000}
.sh-from{font:500 clamp(14px,1.3vw,22px)/1 var(--mo);margin-top:2.2vh;letter-spacing:.02em;color:var(--grey);opacity:.85}
.sh-lines{position:relative;margin-top:5vh;height:clamp(130px,22vh,230px)}
.sh-lines p{position:absolute;left:0;top:0;right:0;font:300 clamp(18px,2.3vw,38px)/1.22 var(--sg);letter-spacing:-.025em;opacity:0;max-width:24em;text-shadow:0 2px 24px #000}
.sh-lines p:first-child{opacity:1}
.sh-eyes{display:flex;gap:12px;margin-top:3vh}
.sh-eyes i{width:11px;height:11px;border-radius:50%;border:2px solid rgba(242,241,240,.45)}
.sh-eyes i.on{background:var(--blue);border-color:var(--blue);box-shadow:0 0 14px var(--blue)}

/* ---------- final ---------- */
#final{background:#000}
.f-pin{position:relative;height:100vh;overflow:hidden;background:#000}
.f-img{filter:brightness(.5) contrast(1);will-change:filter}
.f-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 40%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 52%);pointer-events:none}
#final .eyelet.top{left:74vw;top:8vh}
.slam{position:absolute;z-index:4;left:var(--gut);right:var(--gut);bottom:5vh;display:flex;flex-wrap:wrap;gap:0 .22em;font-size:clamp(40px,9.4vw,200px);line-height:.88;letter-spacing:-.05em;color:var(--grey);pointer-events:none;text-shadow:0 8px 60px rgba(0,0,0,.55)}
.slam span{display:inline-block;opacity:0;will-change:transform}
.lockup{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12vh var(--gut) 9vh;text-align:center;background:#000;position:relative}
.lk-logos{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3.6vw,64px)}
.lk-lace{position:absolute;pointer-events:none;overflow:visible}
.lk-lace path{fill:none;stroke:url(#lkg);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 8px rgba(239,66,111,.55))}
.lk-logos i{font:300 clamp(28px,4vw,70px)/1 var(--sg);font-style:normal;opacity:.7}
.lk-comet{height:clamp(66px,17vh,170px);width:auto}.lk-mw{height:clamp(70px,18vh,180px);width:auto}
.lk-title{margin-top:clamp(26px,6vh,70px);font:300 clamp(18px,3vw,54px)/1 var(--sg);letter-spacing:.5em;padding-left:.5em}
.lk-foot{margin-top:clamp(40px,10vh,110px);font:500 clamp(14px,1.3vw,21px)/1.4 var(--mo);letter-spacing:.04em}
.lk-small{margin-top:1.2em;font:400 clamp(13px,1.05vw,16px)/1.5 var(--mo);opacity:.78;max-width:60ch;text-wrap:balance}

/* ---------- mobile ---------- */
@media (max-width:760px){
  :root{--gut:20px}
  .brand img.b-comet{height:12px}.brand img.b-mw{height:17px}
  #place{right:8px;height:38vh}
  #sound{width:36px;height:36px}
  .hero-h{top:11vh;font-size:clamp(54px,24vw,130px)}
  .hero-sub{bottom:auto;top:calc(11vh + 24vw*.84*3 + 22px);max-width:26ch;font-size:15px}
  .plinth{left:-16vw;width:132vw;top:calc(100% - 17vh)}
  .hero-shoe{left:3vw;top:calc(100% - 27vh - 29vw);width:96vw}
  .hint{font-size:19px}
  .c-one .h-pull{font-size:clamp(46px,19vw,120px);top:12vh}
  .c-one p{right:auto;left:var(--gut);top:calc(12vh + 19vw*1.45 + 40px);width:min(70vw,300px);font-size:14px}
  .c-two{max-width:24ch;font-size:15px}
  .p2-h{font-size:clamp(46px,18vw,120px);bottom:auto;top:12vh}
  .p3-num .eyelet.top{left:88vw;top:23vh}
  #pull4 .eyelet.top{left:80vw;top:8vh}
  .ex-copy h2 .w3{font-size:.6em}
  .map-copy{left:var(--gut);top:auto;bottom:12vh;max-width:24ch;font-size:16px}
  .p3-num{padding-right:calc(var(--gut) + 18px)}
  .p3-num .h-pull{font-size:clamp(46px,18vw,120px)}
  .nm-row{flex-direction:column;justify-content:center;gap:1vh;align-items:flex-start}
  .nm b{font-size:min(30vw,17vh)}.nm-b{align-items:flex-start;text-align:left}
  .nm-arrow{flex:0 0 auto;width:100%;height:12vw;margin:1vh 0}
  .p3-gallery{height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6vh 0 16vh;touch-action:pan-x pan-y}
  .track{position:relative;height:auto;padding:0 var(--gut);gap:20px;width:max-content;align-items:flex-start}
  .pn,.pn.v-full,.pn.v-tall,.pn.v-sq{width:84vw;height:52vh;margin-top:0;scroll-snap-align:center}
  .pn .cap,.pn.c-tr .cap,.pn.c-br .cap,.pn.c-tl .cap{left:0;right:auto;top:auto;bottom:-11vh;max-width:84vw;text-align:left}
  .pn.c-tr .cap p,.pn.c-br .cap p{margin-left:0}
  .pn .cap h3,.pn.v-tall .cap h3,.pn.v-sq .cap h3{font-size:clamp(26px,8vw,40px)}
  .pn .cap p{font-size:14px}
  .p3-bar{position:sticky;left:20px;right:auto;bottom:auto;display:block;width:calc(100vw - 40px);margin:15vh 0 0}
  .msg{font-size:clamp(40px,15.5vw,100px)}
  .ex-shade{background:linear-gradient(180deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.4) 40%,transparent 60%)}
  .ex-copy{top:11vh;translate:0 0;width:calc(100vw - 2*var(--gut))}
  .ex-copy h2{font-size:clamp(40px,13vw,90px)}
  .ex-copy p{display:none}
  .slam{font-size:clamp(46px,19vw,120px);bottom:22vh}
  .lk-logos{flex-direction:column;gap:18px}
  .lk-comet{height:48px}.lk-mw{height:76px}
  .lk-title{letter-spacing:.3em}
}
@media (min-width:761px) and (max-aspect-ratio:1/1){
  .plinth{left:-14vw;width:128vw;top:calc(100% - 22vh)}
  .hero-shoe{left:9vw;width:82vw;top:calc(100% - 22vh - 45vw - 2vh)}
  .hero-sub{bottom:auto;top:calc(12vh + 25vw*1.1 + 2vh)}
}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .ex-shade{background:linear-gradient(180deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.45) 40%,transparent 62%)}
  .ex-copy{top:10vh;translate:0 0;width:calc(100vw - 2*var(--gut))}
  .ex-copy h2{font-size:clamp(40px,11vw,90px)}
  .sh-pin{--pw:100vw}
  .sh-photos{left:0;right:0;width:100%;height:46vh;top:0}
  .sh-photos figure{inset:0 0 0 0}
  .moon{left:30vw;top:auto;bottom:-6vh;margin:0;width:70vw;height:70vw;opacity:.4}
  .sh-text{left:var(--gut);right:var(--gut);top:48vh;bottom:auto;justify-content:flex-start}
  .sh-h{font-size:clamp(40px,13vw,100px)}
  .sh-lines{height:22vh}.sh-lines p{font-size:clamp(17px,4.4vw,26px)}
  .map-cb{width:100vw}
  .hot{width:40px;height:40px;margin:-20px 0 0 -20px}
}
@media (max-width:760px),(max-aspect-ratio:1/1){.f-m02,.f-c06,.f-c13{left:0;width:100vw;top:32vh;aspect-ratio:16/10}.f-m01 .cb{left:calc(50% - 90px)}}
@media (max-aspect-ratio:1/1){.map-copy{top:auto;bottom:12vh}.p2-h{bottom:auto;top:12vh}}
.grab.spent{display:none}
@media (hover:none){.hot{width:44px;height:44px;margin:-22px 0 0 -22px}}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .moon img{animation:none}.hot.on{animation:none}
  #place.all .cord-fill{animation:none}
}