
:root{--ink:#0a0a0a;--paper:#fff;--ash:#7a7a7a;--mist:#f3f3f1;--red:#d1121b;--line:#e4e4e1;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:60px;background:var(--paper)}
*,*::before,*::after{box-sizing:inherit;margin:0}
body{background:var(--paper);color:var(--ink);font:400 14px/1.6 Archivo,Helvetica,Arial,sans-serif;letter-spacing:.02em;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300}
nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;color:#fff;mix-blend-mode:difference}
nav{justify-content:flex-end}nav .r{display:flex;gap:28px}.lbox{position:fixed;z-index:21;top:calc(env(safe-area-inset-top,0px) + 16px);left:24px;mix-blend-mode:difference;display:block;line-height:0}.lbox img{height:15px;width:auto;display:block}
.hero{position:relative;height:100svh;min-height:560px;display:grid;place-items:end start;overflow:hidden;color:#fff;background:#000}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.6)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%)}
.hero .in{position:relative;z-index:2;padding:0 28px 11vh;max-width:1100px}
.big{display:inline-block;margin-bottom:26px;line-height:0}.big img{width:min(78vw,640px);height:auto;display:block}.hero h1{font-size:clamp(40px,7vw,96px);line-height:.9;letter-spacing:-.02em;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(30px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.hero p{margin:22px 0 26px;color:#cfcfcf;max-width:36ch}
.cd{display:flex;gap:22px;margin-bottom:28px;font-variant-numeric:tabular-nums}
.cd b{display:block;font:300 clamp(30px,5vw,56px)/1 "Cormorant Garamond",Georgia,serif}
.cd span{color:#bbb;font-size:12px}
.btn{display:inline-block;padding:17px 44px;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:background .25s,color .25s,letter-spacing .25s;text-align:center}
.btn:hover{background:transparent;color:var(--ink);letter-spacing:.08em}
.hero .btn{background:#fff;color:#000;border-color:#fff}.hero .btn:hover{background:transparent;color:#fff}
.ghost{border-bottom:1px solid #bbb;padding-bottom:3px;margin-left:24px;color:#ddd}
section{padding:14vh 28px}
.mani{max-width:960px;margin:0 auto;text-align:center}
.mani p{font-size:clamp(28px,4.4vw,56px);line-height:1.15}
.prod{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;max-width:1300px;margin:0 auto;align-items:start}
.view{position:relative;aspect-ratio:4/5;background:var(--mist);overflow:hidden;touch-action:pan-y;user-select:none}
.view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.1s ease}
.view .heat{opacity:0}.view.hot .heat{opacity:1}.view.hot .cool{opacity:0}
.hint{position:absolute;left:18px;bottom:16px;color:#fff;background:rgba(0,0,0,.55);padding:6px 14px;font-size:12px}
.tog{display:flex;margin-top:12px;border:1px solid var(--ink)}
.tog button{flex:1;padding:14px;transition:.25s}.tog button[aria-pressed=true]{background:var(--ink);color:#fff}
.info{position:sticky;top:80px;display:grid;gap:20px}
.info h2{font-size:clamp(44px,6vw,76px);line-height:.95}
.row{display:flex;justify-content:space-between;gap:12px}
.ash{color:var(--ash)}
.warn{color:var(--red);font-weight:500}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px}
.spec{border-top:1px solid var(--line)}.spec div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sizes button{width:50px;height:50px;border:1px solid var(--line);transition:.2s}.sizes button:hover{border-color:var(--ink)}
.sizes button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.how{background:var(--mist)}
.how .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;max-width:1100px;margin:50px auto 0}
.how h3{font-size:34px;margin-bottom:8px}.how p{color:var(--ash);max-width:32ch}
.how .t{max-width:1100px;margin:0 auto;font-size:clamp(34px,5vw,64px);line-height:1}
.next{max-width:1300px;margin:0 auto}
.next .g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2px;margin-top:30px}
.tile{background:var(--ink) center/cover;color:#fff;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;gap:6px}
.tile h3{font-size:30px}.tile span{color:#9a9a9a}.tile button{align-self:flex-start;margin-top:12px;border-bottom:1px solid #fff;padding-bottom:2px}
.wait{text-align:center;border-top:1px solid var(--line)}
.wait h2{font-size:clamp(40px,7vw,100px);line-height:.95;margin-bottom:18px}
.wait form{display:grid;gap:0;max-width:520px;margin:34px auto 0;text-align:left}
.wait input{background:none;border:0;border-bottom:1px solid var(--ink);color:var(--ink);font:inherit;padding:16px 0;outline:0}
.wait input::placeholder{color:var(--ash)}
.wait form .btn{margin-top:26px}
.fine{font-size:12px;color:var(--ash);margin-top:14px;text-align:center}
.ok{margin-top:20px;min-height:1.6em}
footer{padding:50px 28px 120px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;background:var(--ink);color:#bbb}
.lbx{line-height:0}.lbx img{height:18px;display:block}
.bar{position:fixed;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);z-index:15;display:flex;justify-content:space-between;align-items:center;padding:12px 28px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .5s}
.bar.on{transform:none}.bar .t{color:var(--ash)}.bar .t b{color:var(--ink);font-weight:500}
.btn.sm{padding:11px 28px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:30;background:#fff;border-left:1px solid var(--line);padding:28px;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.drawer.on{transform:none}
.drawer h3{font-size:32px;display:flex;justify-content:space-between;align-items:center}
.items{flex:1;overflow:auto;margin:24px 0}
.it{display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.it small{color:var(--ash);display:block}.it button{color:var(--ash);text-decoration:underline}
.scrim{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .4s}.scrim.on{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:90px;z-index:40;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 24px;opacity:0;pointer-events:none;transition:.35s}.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:820px){.prod{grid-template-columns:1fr;gap:30px}.info{position:static}}
@media(max-width:600px){nav{padding:16px 18px}nav .r{gap:16px}.hero .in,section{padding-left:18px;padding-right:18px}.bar{padding:10px 18px}.bar .t span{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
.serif{font-family:Archivo,Helvetica,Arial,sans-serif;font-weight:600;letter-spacing:-.035em}
.cd b{font-family:Archivo,Helvetica,Arial,sans-serif;font-weight:500}
.mono{font:400 12px/1.5 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.hero .mono{color:#d8d8d8;margin-bottom:20px}.info .mono{color:var(--ash)}
.hero h1{font-size:clamp(30px,5vw,68px);line-height:1;max-width:16ch}
.cd b{font-size:clamp(26px,4vw,46px)}
.stmt{max-width:880px;margin:0 auto;text-align:center;padding:12vh 28px}.stmt p{font-size:clamp(24px,3.6vw,44px);line-height:1.12}
.next h2{font-size:clamp(30px,4.5vw,56px)!important}
.stmt .hand{display:block;margin:36px auto 0;width:clamp(80px,12vw,130px);height:auto}
.btn.alt{background:transparent;color:var(--ink)}.btn.alt:hover{background:var(--ink);color:#fff}
.acts{display:grid;gap:10px}.acts .btn{width:100%;cursor:pointer}.acts .btn[disabled]{opacity:.35;pointer-events:none}
body:not(.t-index) main{padding-top:96px}.t-product .prod{padding:0 28px}
.cartp,.pg{max-width:900px;margin:0 auto;padding:0 28px 14vh}
.cartp h1,.pg h1{font-size:clamp(34px,5vw,64px);margin-bottom:24px}
.cartp .it input{width:62px;padding:8px;border:1px solid var(--line);font:inherit}
.cartp .it a{color:var(--ash);text-decoration:underline;margin-left:12px}
.cartp .row{margin:22px 0}.cartp .btn{cursor:pointer;margin-right:8px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;padding:0 0 14vh}
.pgrid img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}.pgrid a{display:block;padding-bottom:18px}.pgrid span{display:block;padding:10px 14px 0}
.msg{margin-top:18px;min-height:1.6em}.msg.err{color:var(--red)}
.wait .sms{display:inline-block;margin-top:22px;border-bottom:1px solid var(--ink)}
.lbx a{display:block}
