*{box-sizing:border-box}html{background:#000;color-scheme:dark}body{margin:0;background:#000;color:white;font:12px Helvetica,Arial,sans-serif}a,button{color:inherit;font:inherit}a{text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible,.wall:focus-visible{outline:1px solid #aaa;outline-offset:6px}header{height:82px;position:relative;z-index:10;background:#000}nav{height:100%;display:grid;grid-template-columns:100px 90px 100px;gap:clamp(55px,8vw,155px);align-items:center;justify-content:center;text-align:center}nav>a:not(.brand){opacity:.6;transition:opacity .2s}nav>a:hover,nav>a[aria-current]{opacity:1}.brand img{display:block;width:82px;height:32px;object-fit:contain;margin:auto}.grid{width:88%;max-width:1600px;margin:22px auto 40px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:35px 26px}.product{position:relative;border:0;background:none;padding:0;width:100%;aspect-ratio:1;color:#fff;isolation:isolate}.magnet{position:absolute;inset:0;transition:transform .22s ease-out,filter .22s;will-change:transform}.art{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;aspect-ratio:1;background-image:url('assets/images/products/products.webp');background-repeat:no-repeat}.product:hover .magnet{filter:brightness(1.13)}.label{position:absolute;bottom:-8px;left:0;right:0;font-size:11px;opacity:0;transition:opacity .2s}.product:hover .label,.product:focus-visible .label{opacity:.8}.product:focus-visible .magnet{filter:brightness(1.13)}[hidden]{display:none!important}dialog{border:0;background:#000;color:white;width:min(680px,92vw);padding:28px;max-height:94dvh}dialog::backdrop{background:#000e}.close{position:relative;float:right;background:none;border:0;padding:12px;color:#bbb;z-index:3}#detail .art{position:relative;inset:auto;transform:none;max-width:490px;width:100%;margin:35px auto 15px}dialog h2{font-size:16px;font-weight:400}dialog p{color:#aaa;line-height:1.7}#lookbook{height:calc(100dvh - 82px);overflow:hidden;padding:0}.wall{height:100%;overflow:auto;scrollbar-width:none;overscroll-behavior:contain}.wall::-webkit-scrollbar{display:none}.wall-strip{display:flex;flex-direction:column}.wall-block{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:310px;gap:0}.photo{padding:0;border:0;overflow:hidden;background:#111;min-width:0}.photo img{width:100%;height:100%;display:block;object-fit:cover;transition:filter .2s}.photo:hover img{filter:brightness(1.08)}.photo:nth-child(6n+1){grid-row:span 2}.photo:nth-child(6n+4){grid-row:span 2}.photo:focus-visible{outline-offset:-5px;z-index:2}#lightbox{padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#000f;overflow:hidden}#lightbox .close{position:absolute;right:22px;top:12px}#large-photo{width:calc(100% - 130px);height:calc(100% - 90px);object-fit:contain;position:absolute;top:45px;left:65px}#previous,#next{position:absolute;top:50%;background:none;border:0;font-size:24px;padding:20px;z-index:2}#previous{left:0}#next{right:0}#photo-count{position:absolute;bottom:17px;left:0;right:0;text-align:center;color:#999}#entrance{position:fixed;inset:0;background:#000;z-index:30;overflow:hidden}#intro-video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .8s}#enter{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);background:none;border:0;padding:18px;letter-spacing:.06em;text-shadow:0 1px 12px #000}#enter span{display:block;margin-top:14px;font-size:19px}#skip{position:absolute;right:25px;bottom:25px;background:none;border:0;font-size:11px;color:#bbb;padding:12px}#intro-status{position:absolute;bottom:25%;width:100%;text-align:center;color:#aaa}.curtain{position:absolute;top:0;bottom:0;width:50%;background:#000;opacity:0;pointer-events:none}.left{left:0}.right{right:0}.revealing{background:transparent!important;pointer-events:none}.revealing video,.revealing button,.revealing p{opacity:0}.revealing .curtain{opacity:1;transition:transform 1.1s cubic-bezier(.65,0,.2,1)}.revealing.open .left{transform:translateX(-100%)}.revealing.open .right{transform:translateX(100%)}body.intro{overflow:hidden}body.intro main,body.intro header{pointer-events:none}body.playing #enter{opacity:0;pointer-events:none}body.no-scroll{overflow:hidden}@media(max-width:850px){nav{gap:55px;grid-template-columns:70px 82px 70px}.grid{width:94%;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 10px}.label{font-size:10px}.wall-block{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px}}@media(max-width:480px){header{height:72px}nav{gap:32px;grid-template-columns:60px 75px 60px;font-size:11px}.brand img{width:75px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 8px}.label{opacity:.6}.wall-block{grid-template-columns:repeat(2,1fr);grid-auto-rows:230px}#lookbook{height:calc(100dvh - 72px)}#large-photo{width:100%;left:0;height:calc(100% - 140px);top:65px}#previous,#next{top:auto;bottom:15px}#intro-video{object-position:center}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.magnet{transform:none!important}}
@media(min-width:851px){.photo:nth-child(10){grid-column:span 2;grid-row:span 1}}
@media(orientation:portrait){#intro-video{object-fit:contain;object-position:center}#enter{bottom:13%}}
.wall-block{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,clamp(200px,22vw,360px));grid-template-areas:'a a b c' 'a a d e' 'f g h h' 'i j h h';gap:0}
.photo:nth-child(n){grid-row:auto;grid-column:auto}.photo:nth-child(1){grid-area:a}.photo:nth-child(2){grid-area:b}.photo:nth-child(3){grid-area:c}.photo:nth-child(4){grid-area:d}.photo:nth-child(5){grid-area:e}.photo:nth-child(6){grid-area:f}.photo:nth-child(7){grid-area:g}.photo:nth-child(8){grid-area:h}.photo:nth-child(9){grid-area:i}.photo:nth-child(10){grid-area:j}
@media(max-width:850px){.wall-block{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;grid-template-areas:none}.photo:nth-child(n){grid-area:auto;aspect-ratio:4/5}}
.purchase{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px}#detail-price{font-size:18px}.pill{border:0;border-radius:999px;background:#173aff;color:#fff;padding:15px 29px;min-height:48px;font-size:13px;transition:background .2s}.pill:hover{background:#3252ff}#cart-status{font-size:11px;min-height:19px}#cart-toggle{position:fixed;right:24px;bottom:24px;border:1px solid #333;background:#080808;color:#fff;border-radius:999px;padding:14px 22px;z-index:15}.intro #cart-toggle{display:none}.cart-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:20px 0;border-bottom:1px solid #252525}.cart-row button{grid-column:1/-1;justify-self:start;background:none;border:0;padding:0;color:#999;font-size:11px}.cart-total{display:flex;justify-content:space-between;padding:24px 0;font-size:16px}
.pill{font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:16px;line-height:24px;letter-spacing:.015em;text-transform:uppercase;min-height:48px;height:48px;position:relative;isolation:isolate;background:transparent;padding:12px 28px;transition:transform .18s ease-out}
.pill::before{content:'';position:absolute;inset:0;border-radius:999px;background:#264FEE;z-index:-1;transition:inset .18s ease,background .18s ease}
.pill:hover{background:transparent}.pill:hover::before{inset:-2px;background:#3058EE}.pill:active::before{background:#244BE2}
@media(prefers-reduced-motion:reduce){.pill{transform:none!important}}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/bai-jamjuree-600.ttf') format('truetype')}
.wall-block{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-template-areas:none;grid-auto-rows:auto}.photo:nth-child(n){grid-area:auto;aspect-ratio:4/5}@media(max-width:850px){.wall-block{grid-template-columns:repeat(2,minmax(0,1fr))}}
#enter{bottom:100px;padding:0 18px;line-height:20px;font-size:12px}
#idle-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;opacity:1;transition:opacity .22s linear;background:#000}#idle-video.departing{opacity:0}#enter,#skip,#intro-status{z-index:2}@media(orientation:portrait){#idle-video{object-fit:contain}}
.grid{margin-bottom:28px}
.entry-action{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}#enter.pill{position:relative;left:auto;bottom:auto;transform:none;min-width:164px;height:56px;padding:16px 36px;line-height:24px;font-size:18px;text-shadow:none;letter-spacing:.015em}body.playing .entry-action{opacity:0;pointer-events:none}
#entrance::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,#000 0%,rgba(0,0,0,.68) 12%,transparent 39%),radial-gradient(ellipse 58% 68% at 50% 50%,transparent 28%,rgba(0,0,0,.2) 57%,rgba(0,0,0,.84) 86%,#000 100%)}
#skip,#intro-status{z-index:3}
#idle-video,#intro-video{object-position:calc(50% + var(--entrance-offset-x,0px)) calc(50% + var(--entrance-offset-y,0px))}
#enter.pill{min-width:0;height:48px;min-height:48px;padding:12px 28px;font-size:16px;line-height:24px;border-radius:999px;transition:transform .5s cubic-bezier(.2,.9,.25,1.2)}
#enter.enter-text{position:relative;left:auto;bottom:auto;transform:none;border:0;background:transparent;border-radius:0;padding:14px 18px;min-height:48px;font-family:'Bai Jamjuree',sans-serif;font-size:16px;font-weight:600;line-height:20px;letter-spacing:.01em;color:rgba(255,255,255,.85);text-shadow:none;transition:color .2s,text-shadow .2s,transform .5s cubic-bezier(.2,.9,.25,1.2)}#enter.enter-text:hover{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.35)}#enter.enter-text:active{color:#bfcaff}
#entrance::after{display:none}#idle-video,#intro-video{object-position:center}
#idle-video,#intro-video{object-position:calc(50% + var(--frame-x,0px)) calc(50% + var(--frame-y,0px))}
#lookbook,.wall,.wall-strip,.wall-block,.photo{background:#000}
.photo img{opacity:0;transform:translateY(7px);transition:opacity .65s ease,transform .75s cubic-bezier(.22,.7,.25,1),filter .2s}
.photo.loaded img{opacity:1;transform:translateY(0)}
#enter.enter-text span{display:inline-block;margin:0;font:inherit;animation:enter-dissolve 7s infinite;animation-delay:var(--letter-delay)}
@keyframes enter-dissolve{0%,35%{opacity:1;filter:blur(0)}48%,64%{opacity:0;filter:blur(7px)}80%,100%{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){#enter.enter-text span{animation:none}.photo img{transform:none;transition:none}}
.close,.close:hover,.close:active{background:transparent;border:0;box-shadow:none;outline:none;border-radius:0}.close:focus-visible{outline:none;text-decoration:underline;text-underline-offset:5px;color:#fff}#entrance{transform-origin:50% 50%}
#enter.enter-text span{opacity:0;filter:blur(7px);animation:none}
#entrance.hint-active #enter.enter-text span{animation:enter-idle 7s infinite both;animation-delay:var(--letter-delay)}
@keyframes enter-idle{0%{opacity:0;filter:blur(7px)}15%,48%{opacity:1;filter:blur(0)}65%,100%{opacity:0;filter:blur(7px)}}
@media(prefers-reduced-motion:reduce){#entrance.hint-active #enter.enter-text span{animation:none;opacity:1;filter:none}}
@media(min-width:851px){.photo:nth-last-child(-n+2){grid-column:span 2;aspect-ratio:8/5}}
.magnet{transition:transform .3s cubic-bezier(.22,.7,.25,1),filter .5s cubic-bezier(.4,0,.2,1);filter:brightness(1)}
.entrance-fade{position:absolute;inset:0;background:#000;z-index:5;pointer-events:none;animation:entrance-from-black 1.25s cubic-bezier(.25,.46,.45,.94) both}@keyframes entrance-from-black{0%,8%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.entrance-fade{animation-duration:.15s}}
.pill{transition:transform .5s cubic-bezier(.22,.7,.25,1)}
.pill::before{transition:inset .4s cubic-bezier(.22,.7,.25,1),background .4s ease}
.pill:hover::before{inset:-1px}
#enter.enter-text{transition:color .4s ease,text-shadow .4s ease,transform .5s cubic-bezier(.22,.7,.25,1)}
.magnet{transition:transform .45s cubic-bezier(.22,.7,.25,1),filter .55s ease}
.photo img{transition:opacity .65s ease,transform .75s cubic-bezier(.22,.7,.25,1),filter .45s ease}
.label{transition:opacity .4s ease}
#entrance::after{display:block;opacity:var(--focus-shade,0);background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.45) 18%,transparent 38%,transparent 62%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.9));pointer-events:none}
.close{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;transition:background .35s ease,color .35s ease}.close span{display:block;font:28px/1 Arial,sans-serif;transition:transform .45s cubic-bezier(.22,.7,.25,1)}.close:hover,.close:focus-visible{background:rgba(255,255,255,.10);border-radius:50%;text-decoration:none}.close:hover span{transform:rotate(45deg)}@media(prefers-reduced-motion:reduce){.close:hover span{transform:none}}
#enter.enter-text:hover,#enter.enter-text:active{color:rgba(255,255,255,.85);text-shadow:none}
.product .magnet{transition:filter .55s ease}
html{scrollbar-gutter:stable}
.close{width:40px;height:40px;background:none;transition:background .25s ease}
.close svg{width:24px;height:24px;stroke:rgba(255,255,255,.55);stroke-width:1.8;fill:none;stroke-linecap:round;transition:stroke .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.close:hover{background:rgba(255,255,255,.08)}.close:hover svg{stroke:#fff;transform:rotate(90deg)}}
.close:focus-visible{background:rgba(255,255,255,.08)}
#detail[open]{animation:detail-open .25s ease-out}
#detail[open]::backdrop{animation:detail-backdrop .25s ease-out}
@keyframes detail-open{from{opacity:0}to{opacity:1}}
@keyframes detail-backdrop{from{background:#0000}to{background:#000e}}
@media(prefers-reduced-motion:reduce){#detail[open],#detail[open]::backdrop{animation:none}.close:hover svg{transform:none}}
header{position:fixed;top:0;left:0;right:0;height:82px;background:transparent;isolation:isolate}
main{padding-top:82px}
@media(max-width:480px){header{height:72px}main{padding-top:72px}}
main:has(#lookbook:not([hidden])){padding-top:0}
#lookbook{height:100dvh}
@media(max-width:480px){}
.wall-block{grid-auto-flow:row dense}
.wall-block .photo:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:4/5}
.wall-block .photo.feature{grid-column:span 2;grid-row:span 2;aspect-ratio:4/5}
html,body{height:100%;overflow:hidden;background:#000;overscroll-behavior:none}
html{scrollbar-gutter:auto}
main{height:100dvh;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior-y:none;background:#000}
main:has(#lookbook:not([hidden])){overflow:hidden;scrollbar-gutter:auto}
body.intro main,body.no-scroll main{overflow-y:hidden}
header{top:0}
@media(max-width:480px){}
main{overflow-anchor:none}
header{z-index:10}
body.intro header{pointer-events:none}
header{overflow:visible;pointer-events:none}
header nav{position:relative;z-index:1;pointer-events:auto}
body.intro header nav{pointer-events:none}
.nav-shade{position:fixed;inset:0 0 auto;height:200px;z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,1) 0px,rgba(0,0,0,0) 200px)}
.nav-shade-bottom{position:fixed;inset:auto 0 0;height:200px;z-index:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,1) 0px,rgba(0,0,0,0) 200px)}
body.intro nav>a{opacity:0}
.spin-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:0;transition:opacity .4s ease-out;pointer-events:none}.spin-video.ready{opacity:1}.spin-control{position:absolute;inset:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}.spin-control.dragging{cursor:grabbing}.spin-control:focus,.spin-control:focus-visible{outline:none}.spin-control:focus-visible .spin-hint{text-decoration:underline;text-underline-offset:4px}.spin-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#999;font-size:10px;letter-spacing:.04em;pointer-events:none}
#detail .art{width:100%!important;background-repeat:no-repeat}
#detail-price{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:20px;font-weight:500}
#detail h2{font-size:20px;font-weight:600}
@media(max-width:480px){.purchase{flex-wrap:wrap;gap:18px}}
@media(min-width:851px){.wall-block .photo.feature-right{grid-column:3 / span 2}}
#detail-art{overflow:hidden}.product[aria-busy="true"]{cursor:progress}
#detail[open]::backdrop{animation:detail-backdrop-in 320ms ease-out}
#detail[data-closing]::backdrop{animation:detail-backdrop-out 180ms ease-in forwards}
@keyframes detail-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes detail-backdrop-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#detail::backdrop{animation:none!important}}
.product .label{opacity:0;bottom:-8px;text-align:center;pointer-events:none;transition:opacity .3s ease}
@media(hover:hover){.product:hover .label{opacity:.8}}
.product:focus-visible .label{opacity:.8}
body:has(#shop:not([hidden])) .nav-shade-bottom{display:none}
#shop.grid{margin-bottom:0;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.purchase.later .na{font-size:16px;font-weight:500;color:rgba(255,255,255,.6)}
.pill.soon{display:inline-flex;align-items:center;cursor:default;pointer-events:none;color:rgba(255,255,255,.8)}
.pill.soon::before{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}