@font-face{font-family:Geist;src:url('/assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Mono;src:url('/assets/fonts/geist-mono.woff2') format('woff2');font-display:swap}
@font-face{font-family:Display;src:url('/assets/fonts/franklin-black-italic.woff2') format('woff2');font-weight:900;font-display:swap}
:root{--paper:#f3f2ee;--ink:#050505;--muted:#969695;--line:#ffffff28;--accent:#ef865e;--gutter:4vw;color-scheme:dark}
*{box-sizing:border-box}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}body{margin:0;background:var(--ink);color:var(--paper);font-family:Geist,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{color:var(--ink);background:var(--accent)}
.micro{font:10px/1.5 Mono,monospace;letter-spacing:.03em}.accent{color:var(--accent)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;z-index:100;top:10px;left:10px;padding:12px;background:var(--paper);color:var(--ink);transform:translateY(-200%)}.skip:focus{transform:translateY(0)}
/* A quiet frame leaves the entire centre of the page to the object. */
.nav{position:fixed;top:22px;left:var(--gutter);right:var(--gutter);height:94px;display:flex;align-items:center;justify-content:space-between;z-index:20;border-top:1px solid var(--line)}.nav:before{content:'';position:absolute;top:-1px;left:2%;width:24px;height:1px;background:#fff;box-shadow:0 0 9px 1px #fff9}.wordmark{font:900 38px/.79 Display,Arial,sans-serif;letter-spacing:-.055em;text-align:center}.wordmark span{display:block;font:900 17px/1 Display;letter-spacing:-.02em;margin-top:3px}.nav>.wordmark{position:absolute;left:50%;transform:translateX(-50%)}.nav nav{display:flex;gap:30px;align-items:center;font-size:10px;margin-left:auto}.nav nav a{display:flex;align-items:center;gap:9px}.nav nav a:hover{opacity:.7}.about-link{background:var(--paper);color:#161616;padding:14px 19px;border-radius:6px;box-shadow:0 0 20px #fff2}.about-link span{margin-left:9px}.menu-dots{width:10px;height:10px;background:radial-gradient(circle,#eee 1px,transparent 1.5px) 0 0/5px 5px}.sound{display:flex;align-items:center;gap:3px;padding:18px 0}.sound span{font-size:10px;margin-right:8px;color:#d0d0cc}.sound i{display:inline-block;width:2px;height:6px;background:#deded9}.sound i:nth-child(3){height:12px}.sound[aria-pressed=true] i{animation:equalize .6s ease-in-out infinite alternate}.sound[aria-pressed=true] i:nth-child(3){animation-delay:.2s}.sound[aria-pressed=true] i:nth-child(4){animation-delay:.4s}@keyframes equalize{to{transform:scaleY(.3)}}
#stage{position:fixed;inset:0;z-index:3;touch-action:pan-y;cursor:grab}#stage:active{cursor:grabbing}#stage canvas{display:block;width:100%;height:100%}.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 65% 31% at 50% 100%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 90%),radial-gradient(ellipse 85% 55% at 50% 75%,#777d8240,transparent 95%);transition:background 1s}.frame{position:fixed;inset:135px var(--gutter) 27px;z-index:1;pointer-events:none}.frame i{position:absolute;width:6px;height:6px;border-color:#777;border-style:solid;border-width:1px 0 0 1px}.frame i:nth-child(2){right:0;transform:rotate(90deg)}.frame i:nth-child(3){right:0;bottom:0;transform:rotate(180deg)}.frame i:nth-child(4){bottom:0;transform:rotate(270deg)}
main{position:relative;pointer-events:none}main a,main button{pointer-events:auto}.hero{height:100svh;min-height:660px;position:relative}.hero-side{position:absolute;top:44%;left:var(--gutter);display:flex;flex-direction:column;gap:34px;color:#888;font:8px Mono;letter-spacing:.05em;z-index:5}.hero-side span{writing-mode:vertical-rl;transform:rotate(180deg)}.edition{position:absolute;top:43%;right:var(--gutter);display:flex;align-items:center;flex-direction:column;gap:14px;font:9px Mono;color:#888;z-index:5}.edition i{height:35px;width:1px;background:#ffffff30}.edition span:first-child{color:#eee}.scene-arrows{position:absolute;inset:47% 23% auto;display:flex;justify-content:space-between;z-index:5;pointer-events:none}.scene-arrows button{display:grid;place-items:center;width:38px;height:38px;font:300 32px/1 Geist;color:#b2b2ad;border:1px solid #ffffff25;border-radius:50%;transition:color .25s,border-color .25s,background .25s}.scene-arrows button:hover{border-color:#fff9;color:#fff;background:#ffffff12}
.hero-bottom{position:absolute;bottom:47px;left:50%;width:min(410px,80%);transform:translateX(-50%);text-align:center;z-index:5}.object-title .micro{font:8px Mono;letter-spacing:.08em;color:#999;margin:0 0 8px}.object-title h2{font:900 clamp(35px,3.4vw,54px)/.95 Display,Arial;margin:0;letter-spacing:-.035em}.object-title>p:last-child{font-size:11px;color:#999;margin:10px 0 0;line-height:1.5}.carousel-controls{margin:20px 0 20px}.swatches{display:flex;position:relative;height:17px;justify-content:space-between;align-items:center}.swatches:before{content:'';position:absolute;left:8px;right:8px;top:7px;height:2px;background:linear-gradient(90deg,#ef865e,#bfd0d9,#4569d4,#b27a59,#a6b657,#828c85);opacity:.7;border-radius:3px}.swatches button{height:17px;width:17px;padding:0;position:relative;border-radius:50%;background:transparent;transition:transform .4s}.swatches button:after{content:'';position:absolute;inset:5px;background:var(--swatch);border-radius:50%;transition:inset .4s,box-shadow .4s}.swatches button[aria-pressed=true]:after{inset:2px;box-shadow:0 0 15px color-mix(in srgb,var(--swatch) 50%,transparent)}.swatches button:hover:after{inset:2px}.explore{font-size:9px;display:inline-flex;gap:14px;align-items:center;color:#c5c5c0;padding:4px;transition:color .2s}.explore:hover{color:white}.explore>span:last-child{font-size:13px}.hero-footer{position:absolute;bottom:45px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;color:#777;font:8px Mono;z-index:5;pointer-events:none}
/* The text stays at the left while the selected shoe opens on the right. */
.anatomy{position:relative;height:220svh;min-height:1400px}.anatomy-sticky{height:100svh;min-height:680px;position:sticky;top:0;padding:22vh 9vw 60px;z-index:4}.anatomy-copy{width:35%;position:relative}.anatomy-copy>.micro{font-size:9px;color:#999}.anatomy-copy h2{font-size:clamp(50px,5.9vw,100px);letter-spacing:-.065em;line-height:1.02;font-weight:500;margin:30px 0 22px}.anatomy-copy h2 em{font-family:Display;font-style:normal;font-weight:900;letter-spacing:-.05em}.intro{color:#aaa;font-size:14px;line-height:1.6}.materials{margin-top:30px;max-width:330px}.materials>div{display:flex;gap:22px;padding:14px 0;border-top:1px solid #ffffff20}.materials>div>span{font:9px Mono;color:#aaa;padding-top:2px}.materials p{font:9px Mono;margin:0;letter-spacing:.04em}.materials small{display:block;font:12px/1.5 Geist;color:#999;margin-top:6px;letter-spacing:0}.anatomy-marker{position:absolute;right:var(--gutter);top:39%;writing-mode:vertical-rl;font-size:8px;color:#888}.anatomy-marker i{width:1px;height:45px;background:#777;display:inline-block;margin-bottom:20px}.anatomy-footer{position:absolute;bottom:45px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:8px;color:#777}.about{position:relative;min-height:100svh;padding:175px 9vw 0;z-index:5}.about-top{display:flex;justify-content:space-between;color:#888;font-size:9px}.about h2{font-size:clamp(65px,9vw,145px);font-weight:500;letter-spacing:-.065em;line-height:1;margin:60px 0 45px;max-width:1100px}.about h2 em{font:900 1em/1 Display;letter-spacing:-.05em;white-space:nowrap}.about-bottom{display:flex;align-items:end;justify-content:space-between;gap:30px}.about-bottom p{font-size:16px;line-height:1.7;color:#aaa}.back-collection{display:flex;align-items:center;gap:45px;border-bottom:1px solid #777;padding:18px 0;font:10px Mono}.back-collection span{font:36px Geist;transition:transform .2s}.back-collection:hover span{transform:translate(5px,-5px)}footer{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:85px;border-top:1px solid var(--line);padding:32px 0 40px;color:#888}footer .wordmark{color:var(--paper);font-size:29px}footer .wordmark span{display:inline;font:9px Geist;vertical-align:top}footer .micro{font-size:8px}.credits-button{padding:10px 0}.credits-button:hover{color:#fff}
.loader{position:fixed;inset:0;z-index:80;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}.loader.is-done{opacity:0;visibility:hidden}.loader-logo{font:900 72px/1 Display;letter-spacing:-4px}.loader-logo span{font:12px Geist;vertical-align:top;letter-spacing:0;display:inline-block;margin:6px 0 0 6px}.loader-rule{height:1px;width:190px;background:#ffffff20;margin-top:35px}.loader-rule i{height:100%;display:block;background:#eee;width:0;transition:width .3s}.loader p{width:190px;display:flex;justify-content:space-between;font:7px Mono;letter-spacing:.05em;color:#888;margin-top:14px}.load-error{position:fixed;inset:0;z-index:85;background:var(--ink);place-content:center;text-align:center;padding:30px}.load-error:not([hidden]){display:grid}.load-error button{background:var(--paper);padding:16px 28px;margin:16px auto;color:var(--ink)}dialog{color:var(--paper);border:1px solid #ffffff35;background:#141414;padding:50px;max-width:560px;width:calc(100% - 36px)}dialog::backdrop{background:#000b;backdrop-filter:blur(10px)}dialog .micro{color:#aaa}dialog h2{font-size:52px;letter-spacing:-.06em;line-height:1.05}dialog p{font-size:14px;line-height:1.7;color:#bcbcb5}dialog a{text-decoration:underline;text-underline-offset:4px}dialog .credits-note{font-size:12px;color:#999}.close-credits{position:absolute;right:18px;top:10px;font-size:32px}html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-stopped{overflow:hidden}
@media(max-height:760px) and (min-width:801px){.nav{top:20px;height:75px}.frame{top:112px}.hero{min-height:620px}.hero-bottom{bottom:31px}.object-title h2{font-size:36px}.carousel-controls{margin:14px 0}.hero-footer{bottom:33px}.anatomy-sticky{padding-top:18vh}.anatomy-copy h2{font-size:62px;margin:20px 0}.materials{margin-top:20px}.materials>div{padding:10px 0}.about{padding-top:135px}.about h2{margin-top:40px}}
@media(max-width:800px){:root{--gutter:6vw}.nav{top:20px;height:75px}.nav nav{gap:0}.nav nav>a:first-child{display:none}.about-link{padding:11px 12px;font-size:8px}.about-link span{margin-left:0}.nav .wordmark{font-size:33px}.nav .wordmark span{font-size:14px}.sound span{font-size:8px}.sound{gap:2px}.frame{top:113px;bottom:23px}.hero{min-height:640px}.hero-side{left:var(--gutter);top:37%;font-size:7px;gap:30px}.hero-side span:last-child{display:none}.edition{top:36%;font-size:8px}.scene-arrows{inset:49% 10% auto}.scene-arrows button{width:30px;height:30px;font-size:24px}.hero-bottom{width:66%;bottom:58px}.object-title h2{font-size:40px}.object-title .micro{font-size:7px}.object-title>p:last-child{font-size:10px;max-width:230px;margin:9px auto 0}.carousel-controls{margin:23px 0 20px}.explore{font-size:8px;white-space:nowrap;gap:10px}.hero-footer{bottom:34px;justify-content:center;font-size:7px}.hero-footer>span:last-child{display:none}.anatomy{height:250svh;min-height:1700px}.anatomy-sticky{padding:123px 9vw 30px;min-height:690px}.anatomy-copy{width:100%}.anatomy-copy>.micro{font-size:7px}.anatomy-copy h2{font-size:51px;margin:21px 0 0}.anatomy-copy h2 br{display:none}.anatomy-copy h2 em{display:block}.intro{font-size:12px;margin-top:14px}.materials{position:absolute;top:49svh;left:0;max-width:100%;width:100%;margin:0}.materials>div{padding:10px 0;gap:16px}.materials p{font-size:8px}.materials small{font-size:10px}.anatomy-marker{top:45%;font-size:7px}.anatomy-footer{bottom:34px;font-size:6px}.about{padding:140px 9vw 0;min-height:820px}.about-top{font-size:8px}.about-top span:last-child{display:none}.about h2{font-size:clamp(56px,12vw,90px);margin-top:60px}.about h2 em{white-space:normal}.about-bottom{align-items:start;flex-direction:column;gap:25px}.about-bottom p{font-size:15px}.back-collection{font-size:9px;gap:30px}footer{margin-top:60px;flex-wrap:wrap;padding-top:25px}footer .micro{font-size:7px}dialog{padding:30px}dialog h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media(max-width:800px){.scene-arrows{inset:auto 8% 173px}.anatomy .intro{display:none}}