:root{
  --void:#FFFFFF;--ash:#F5F6F7;--ash-2:#ECEEF0;--line:#E1E3E6;
  --chrome-hi:#000000;--chrome:#5B6068;--chrome-lo:#8B9199;--chrome-deep:#D5D8DC;
  --ok:#137A32;
  --gut:clamp(18px,4vw,56px);--maxw:1280px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--chrome-hi);font-family:'Inter Tight',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,#FFFFFF 0%,#FBFBFC 55%,#F6F7F8 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="linear" slope="0.10"/></feComponentTransfer></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--chrome-hi);outline-offset:3px}

.mono{font-family:'Chivo Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}
.display{font-family:'Inter Tight',system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.01em;line-height:.98;font-weight:700}

.sheen{position:relative;overflow:hidden}
.sheen::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 48%,rgba(255,255,255,.55) 51%,transparent 62%);
  transform:translateX(-120%);transition:transform .62s var(--ease);pointer-events:none;
}
.sheen:hover::after,.sheen:focus-visible::after{transform:translateX(120%)}

/* ============ SPLASH ============ */
#splash{position:fixed;inset:0;z-index:120;background:#FFFFFF;display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s}
#splash .splash-cap{color:var(--chrome-lo)}
/* model-viewer's default loading bar is invisible on black but shows as a grey line on white */
model-viewer::part(default-progress-bar){display:none}
#splash .enter-btn{color:#000;border-color:#000}
#splash .enter-btn:hover,#splash .enter-btn:focus-visible{background:#000;color:#fff;border-color:#000}
#splash.gone{opacity:0;visibility:hidden}
.spin-stage{perspective:1400px;width:min(78vw,620px)}
.spin{transform-style:preserve-3d;animation:spin 2.6s var(--ease) forwards;filter:drop-shadow(0 0 60px rgba(180,200,225,.22))}
@keyframes spin{
  0%{transform:rotateY(-95deg) scale(.82);opacity:0}
  18%{opacity:1}
  72%{transform:rotateY(372deg) scale(1.03)}
  100%{transform:rotateY(360deg) scale(1)}
}
.splash-cap{margin-top:34px;text-align:center;font-size:10px;color:var(--chrome-lo);opacity:0;animation:fade .8s 1.9s forwards}
@keyframes fade{to{opacity:1}}
.enter-btn{
  display:block;margin:30px auto 0;padding:15px 58px;
  border:1px solid var(--line);border-radius:2px;background:transparent;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:21px;letter-spacing:.03em;
  color:var(--chrome-hi);
  opacity:0;animation:fade .8s 2.3s forwards;
  transition:border-color .25s,background .25s,transform .16s var(--ease);
}
.enter-btn:hover,.enter-btn:focus-visible{border-color:var(--chrome);background:var(--ash-2)}
.enter-btn:active{transform:scale(.985)}

/* ============ GATE ============ */
#gate{position:fixed;inset:0;z-index:110;background:var(--void);display:grid;place-items:center;padding:var(--gut);opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s;overflow-y:auto}
#gate.up{opacity:1;visibility:visible}
#gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-box{width:min(100%,430px);text-align:center;padding-block:40px}
.gate-mark{width:clamp(150px,42vw,215px);margin:0 auto 30px}
.gate-h{font-size:clamp(38px,10vw,58px);margin-bottom:24px}
.gate-form{display:flex;flex-direction:column;gap:9px}
.field{width:100%;background:var(--ash-2);border:1px solid var(--line);color:var(--chrome-hi);padding:16px 17px;font-size:16px;border-radius:2px;font-family:'Chivo Mono',monospace;letter-spacing:.05em}
.field::placeholder{color:var(--chrome-lo);letter-spacing:.1em}
.field:focus{border-color:var(--chrome);outline:none}
.btn{display:block;width:100%;padding:17px;border-radius:2px;background:var(--chrome-hi);color:var(--void);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:13px;transition:transform .16s var(--ease)}
.btn:active{transform:scale(.985)}
.consent{font-size:10.5px;line-height:1.45;color:var(--chrome-lo);text-align:left;margin-top:4px}
.gate-skip{margin-top:22px;font-size:11px;color:var(--chrome-lo);border-bottom:1px solid var(--chrome-deep);padding-bottom:2px}
.gate-skip:hover{color:var(--chrome-hi)}
.gate-done{font-size:14px;color:var(--ok);margin-top:16px;display:none}

/* ============ ANNOUNCEMENT BAR ============ */
.ann{position:fixed;top:0;left:0;right:0;z-index:81;height:38px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 var(--gut);background:var(--void);border-bottom:1px solid var(--line)}
.ann-s{font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
@media(max-width:860px){.ann-l,.ann-r{display:none}.ann{justify-content:center}}

/* ============ HEADER: hamburger · centered logo · cart ============ */
header{position:fixed;top:38px;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:10px var(--gut);background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .3s;min-height:64px}
header.stuck{border-bottom-color:var(--line)}
.hd-logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;padding:8px;margin:-8px}
.hd-logo img{height:34px;width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.nav-btn{width:44px;height:44px;display:grid;place-items:center}
.nav-ico{width:22px;height:2px;background:var(--chrome-hi);position:relative;display:block}
.nav-ico::before,.nav-ico::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--chrome-hi)}
.nav-ico::before{top:-7px}.nav-ico::after{top:7px}
.cart-btn{display:flex;align-items:center;gap:6px;min-width:44px;min-height:44px;justify-content:center;color:var(--chrome-hi)}
.cart-num{min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--chrome-hi);color:var(--void);font-size:10px;display:grid;place-items:center;font-family:'Chivo Mono',monospace;font-weight:600}

/* ============ NAV DRAWER ============ */
.menu{position:fixed;top:0;left:0;bottom:0;width:min(100%,340px);z-index:96;background:var(--ash);border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .42s var(--ease);display:flex;flex-direction:column;padding:0 26px 26px}
.menu.on{transform:none}
.menu-head{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);margin-bottom:22px}
.menu-head button{font-size:11px;color:var(--chrome-lo);padding:17px;margin:-17px}
.menu-link{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:20px;font-weight:700;letter-spacing:-.005em;padding:15px 0;color:var(--chrome-hi)}
.menu-link:hover{color:var(--chrome)}
.menu-arrow{opacity:0;transform:translateX(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease);font-weight:400}
.menu-link:hover .menu-arrow,.menu-link:focus-visible .menu-arrow{opacity:1;transform:none}

/* ============ LAYOUT ============ */
main{opacity:0;transition:opacity .8s var(--ease)}
main.live{opacity:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(62px,9vw,110px) 0;scroll-margin-top:104px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:38px;flex-wrap:wrap}
.sec-eyebrow{font-size:10px;color:var(--chrome-lo);margin-bottom:11px}
.sec-h{font-size:clamp(30px,4vw,40px)}
.sec-meta{font-size:10.5px;color:var(--chrome-lo)}

/* ============ SHOP ALL: collection grid ============ */
#shop{padding-top:156px}
.col-title{font-size:clamp(30px,4vw,40px);margin-bottom:24px}
.tool-row{display:flex;justify-content:space-between;align-items:center;gap:10px 22px;flex-wrap:wrap;margin-bottom:22px}
.tool-side{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tool-label{font-size:11px;color:var(--chrome-lo)}
.tool-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-hi)}
.tool-count{font-size:11px;color:var(--chrome-lo)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(12px,1.8vw,22px)}
@media(max-width:720px){.pgrid{grid-template-columns:1fr 1fr;gap:10px}}
.pcard{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--ash);cursor:pointer;display:block;width:100%;padding:0;text-align:inherit}
.pcard img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover img,.pcard:focus-visible img{transform:scale(1.04)}
.pquick{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.9);border:1px solid var(--line);display:grid;place-items:center;color:var(--chrome-hi);backdrop-filter:blur(6px);transition:background .25s,border-color .25s}
.pcard:hover .pquick{border-color:var(--chrome)}
.pmeta{padding:12px 4px 0}
.pname{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.pprice{font-size:14px;font-weight:700;color:var(--chrome-hi);margin-top:5px}

/* ============ PRODUCT ============ */
.buybox{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,54px);align-items:start}
@media(max-width:860px){.buybox{grid-template-columns:1fr}}
.buy-img{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--ash)}
#cwPhoto{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.pv-thumbs{display:flex;gap:8px;margin-top:10px}
.pv-thumbs[hidden]{display:none}
.pv-th{width:64px;height:80px;border:1px solid var(--line);border-radius:2px;overflow:hidden;padding:0}
.pv-th img{width:100%;height:100%;object-fit:cover;display:block}
.pv-th.on{border-color:var(--chrome-hi)}
.li-sw{object-fit:cover}
.buy-name{font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(26px,4.5vw,38px);line-height:1;margin-bottom:10px}
.buy-price{font-size:15px;font-weight:700;margin-bottom:28px;display:block}
.opt-label{font-size:10px;color:var(--chrome-lo);margin-bottom:11px;display:block}
.opt-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:26px}
.opt{padding:11px 15px;border:1px solid var(--line);border-radius:2px;font-family:'Chivo Mono',monospace;font-size:11px;color:var(--chrome);transition:.18s;display:flex;align-items:center;gap:8px}
.opt:hover{border-color:var(--chrome)}
.opt.on{background:var(--chrome-hi);color:var(--void);border-color:var(--chrome-hi)}
.opt.on .dot{border-color:rgba(255,255,255,.6)}
.dot{width:12px;height:12px;border-radius:99px;border:1px solid rgba(0,0,0,.22);flex-shrink:0}
.add{width:100%;padding:17px;border-radius:2px;background:var(--chrome-hi);color:var(--void);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.16em;transition:.2s}
.add.done{background:var(--ok);color:#fff}

/* ============ PAGE VIEWS ============ */
#shop[hidden],#gallery[hidden],#product[hidden]{display:none}
#product,#gallery{padding-top:156px}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:11px;color:var(--chrome-lo);margin-bottom:18px}
.back-link:hover{color:var(--chrome-hi)}

/* ============ GALLERY: COMING SOON ============ */
.coming{min-height:46vh;display:grid;place-items:center;align-content:center;gap:10px;background:var(--ash);border:1px solid var(--line);border-radius:18px;text-align:center;padding:60px var(--gut)}
.coming-t{font-size:clamp(26px,4vw,38px)}
.coming-ig{font-size:11px;color:var(--chrome-lo);min-height:44px;display:inline-flex;align-items:center}
.coming-ig:hover{color:var(--chrome-hi)}
@media(max-width:720px){
  #gallery{padding-inline:0}
  #gallery .sec-head{padding-inline:18px}
  .coming{border-radius:0;border-left:0;border-right:0;min-height:56vh}
}

/* ============ GALLERY SLIDESHOW ============ */
.slider{position:relative}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:clamp(9px,1.4vw,16px)}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;gap:clamp(9px,1.4vw,16px)}
.slide figure{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--ash)}
.slide img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 10%;transition:transform .7s var(--ease)}
.slide figure:hover img{transform:scale(1.045)}
.sl-dots{display:flex;justify-content:center;gap:2px;margin-top:14px}
.sl-dot{padding:21px 12px}
.sl-dot::before{content:"";display:block;width:22px;height:2px;background:var(--chrome-deep);transition:background .25s}
.sl-dot.on::before{background:var(--chrome-hi)}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:clamp(44px,7vw,74px) 0 84px;background:var(--ash)}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px}
@media(max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}}
.ft-col h4{font-size:10px;color:var(--chrome-lo);margin-bottom:15px;font-family:'Chivo Mono',monospace;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.ft-col a,.ft-col p{display:block;font-size:12.5px;color:var(--chrome);margin-bottom:9px;transition:color .2s}
.ft-col a:hover{color:var(--chrome-hi)}
.ft-mark{width:132px;margin-bottom:16px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22))}
.ft-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:10px;color:var(--chrome-deep)}

/* ============ CART ============ */
.scrim{position:fixed;inset:0;background:rgba(12,12,14,.42);backdrop-filter:blur(3px);z-index:95;opacity:0;visibility:hidden;transition:.35s}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(100%,412px);z-index:96;background:var(--ash);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .42s var(--ease)}
.drawer.on{transform:none}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line)}
.dr-head h3{font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.14em}
.dr-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.dr-empty{margin:auto;text-align:center;color:var(--chrome-lo);font-size:12.5px}
.li{display:flex;gap:13px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.li-sw{width:52px;height:64px;border-radius:2px;flex-shrink:0;border:1px solid var(--line)}
.li-info{flex:1;min-width:0}
.li-nm{font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.06em;margin-bottom:3px}
.li-mt{font-family:'Chivo Mono',monospace;font-size:10px;color:var(--chrome-lo);letter-spacing:.08em}
.li-x{font-size:11px;color:var(--chrome-lo);padding:6px}
.li-x:hover{color:#E5484D}
.dr-foot{padding:20px;border-top:1px solid var(--line)}
.dr-sum{display:flex;justify-content:space-between;margin-bottom:6px;font-size:12.5px;color:var(--chrome)}
.dr-tot{display:flex;justify-content:space-between;margin:14px 0 16px;font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase}


/* ---- tap targets: 44px minimum hit areas ---- */
nav a.nv{padding:16px 8px;margin:-16px -8px}
.cart-btn{padding:13px 8px;margin:-13px -8px}
header>a{display:inline-flex;padding:9px 2px;margin:-9px -2px}
.opt{min-height:44px;min-width:44px;justify-content:center}
.li-x{min-width:44px;min-height:44px}
#cartClose{padding:16px;margin:-16px}
@media(max-width:720px){
  .ft-col a{padding:14.5px 0;margin-bottom:0}
  .gate-skip{display:inline-block;padding:15px 10px;margin:-15px -10px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .spin{animation:none;transform:none}
  .reveal{opacity:1;transform:none}
}