:root{--cloth:#efe5d0;--paper:#f7f1e3;--ink:#17120e;--madder:#8f1d14;--indigo:#14264d;--haldi:#d9a21b;--wood:#4a2c17;--line:rgba(23,18,14,.18);--dsp:Gloock,Georgia,serif;--txt:"Hanken Grotesk",system-ui,sans-serif;--gut:clamp(16px,4vw,56px)}
@view-transition{navigation:auto}
*{box-sizing:border-box;margin:0}html{-webkit-text-size-adjust:100%}
body{background:var(--cloth);color:var(--ink);font:400 16px/1.55 var(--txt);overflow-x:clip;padding-bottom:calc(62px + env(safe-area-inset-bottom))}body.lock{overflow:hidden}
img,video,canvas,svg{display:block;max-width:100%}img,video{object-fit:cover}a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3{font-family:var(--dsp);font-weight:400;line-height:1.04;text-wrap:balance}h1{font-size:clamp(40px,7vw,84px)}h2{font-size:clamp(30px,4.6vw,58px)}h3{font:500 15px/1.3 var(--txt)}
:focus-visible{outline:2px solid var(--madder);outline-offset:2px}.ic{width:22px;height:22px}.wrap{padding-inline:var(--gut);max-width:1500px;margin-inline:auto}
.skip{position:fixed;left:-999px;z-index:99}.skip:focus{left:8px;top:8px;background:#fff;padding:8px}
.kick{font:500 12px var(--txt);letter-spacing:.14em;text-transform:uppercase}
.btn{display:inline-block;background:var(--madder);color:#fff7e6;padding:15px 26px;text-decoration:none;font-weight:500;text-align:center;transition:background .2s,transform .2s;min-height:48px}.btn:hover{background:var(--indigo)}.btn:active{transform:scale(.97)}.btn.wide{display:block;width:100%}.btn.lite{background:var(--cloth);color:var(--ink)}.btn.lite2{background:none;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);margin-top:10px}.btn.lite2:hover{background:var(--ink);color:var(--cloth)}
.lnk{text-decoration:underline;text-underline-offset:3px;font-size:15px}.empty{padding:32px 0}
.top{position:fixed;inset:0 0 auto;z-index:20;height:60px;display:flex;align-items:center;gap:14px;padding-inline:var(--gut);background:var(--cloth);border-bottom:1px solid var(--line)}
.logo{display:flex;gap:8px;align-items:center;text-decoration:none;color:var(--madder);margin-right:auto}.logo b{font:400 20px var(--dsp);color:var(--ink);white-space:nowrap}
.nav{display:none;gap:26px}.nav a{text-decoration:none;font-size:15px}.nav a:hover{color:var(--madder)}
.searchbtn{display:flex;gap:8px;align-items:center;min-height:44px;font-size:15px}.searchbtn span{display:none}.ib{position:relative;min-width:44px;min-height:44px;display:grid;place-items:center}[data-bc],[data-wc]{position:absolute;top:2px;right:0;background:var(--madder);color:#fff;font:500 11px/16px var(--txt);min-width:16px;border-radius:8px;text-align:center;font-style:normal}[data-bc]:empty,[data-wc]:empty{display:none}.hideS{display:none}
.bot{position:fixed;inset:auto 0 0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);background:var(--cloth);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.bot>*{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:60px;text-decoration:none;font-size:11px;gap:2px}.bot .on{color:var(--madder)}.bot [data-bc]{right:calc(50% - 20px);top:6px}
main{padding-top:60px}body.home main{padding-top:0}
/* hero */
.press{height:220svh;position:relative}.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
.film{position:absolute;inset:0;display:grid}.film video{width:100%;height:100%;min-height:0}.film video[data-wide]{display:none}
#cloth{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 36%;will-change:transform;cursor:crosshair}
.fcap{position:absolute;inset:auto var(--gut) 90px;opacity:0;color:#fff7e6;z-index:1;pointer-events:none}.fcap p{font:400 clamp(28px,5vw,56px)/1.08 var(--dsp);max-width:15em;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.block{position:absolute;left:0;top:0;opacity:0;pointer-events:none;background:linear-gradient(135deg,#6b4325,#3f2412 60%,#5a361d);color:#2a1609;display:grid;place-items:center;box-shadow:0 18px 28px rgba(23,18,14,.42),inset 0 0 0 2px rgba(255,220,170,.14);will-change:transform;z-index:2}.block svg{width:78%;height:78%;color:#26130a}
.band{position:absolute;inset:auto 0 0;padding:0 var(--gut) calc(78px + env(safe-area-inset-bottom));pointer-events:none;z-index:3;color:var(--ink)}.band a{pointer-events:auto}.band h1{font-size:clamp(66px,20.5vw,230px);line-height:.88;margin:6px 0 16px;letter-spacing:-.015em;color:var(--madder)}.band em{font-style:normal;display:block;color:var(--indigo)}
.bandrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.hint{font-size:14px;opacity:0;transition:opacity .5s}.hint.on{opacity:1}
/* ink */
.ink{padding-block:clamp(80px,14vw,180px)}.ink p{font:400 clamp(30px,5.4vw,72px)/1.1 var(--dsp);max-width:21em}.ink span{color:rgba(23,18,14,.17);transition:color .25s}.ink span.on{color:var(--indigo)}
/* rack */
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px}
.rack{padding-bottom:clamp(70px,10vw,130px)}.rail{display:flex;gap:14px;overflow-x:auto;padding:26px var(--gut) 18px;scroll-snap-type:x proximity;scrollbar-width:none;border-top:2px solid var(--wood);overscroll-behavior-x:contain}.rail::-webkit-scrollbar{display:none}
.hang{flex:0 0 min(68vw,330px);scroll-snap-align:center;text-decoration:none;position:relative;transform-origin:50% -26px;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}.hang::before{content:"";position:absolute;left:50%;top:-26px;height:26px;border-left:2px solid var(--wood)}.hang:hover{transform:rotate(-1.2deg)}.hang video,.hang img{width:100%;aspect-ratio:3/4.3;background:#d9cdb4}.hang span{display:block;font:400 24px/1.1 var(--dsp);margin-top:10px}
/* dye */
.dye{height:560svh;--bg:#efe5d0;--fg:#17120e}.dstage{position:sticky;top:0;height:100svh;background:var(--bg);color:var(--fg);transition:background .7s,color .5s;display:grid;grid-template-rows:auto 1fr;align-content:center;gap:24px;padding:70px var(--gut) 76px;overflow:hidden}
.dsvg{width:min(78vw,44svh);margin-inline:auto;box-shadow:0 20px 50px rgba(0,0,0,.28)}.l{opacity:0;transition:opacity .7s}.l.on{opacity:1}
.dtxt{max-width:34em;margin-inline:auto;text-align:center}.dtxt small{font-size:13px}.dtxt h2{font-size:clamp(46px,9vw,112px);margin:2px 0 8px}.dtxt.sw>*{animation:up .55s both}.dbar{position:absolute;left:0;right:0;bottom:62px;height:3px}.dbar i{display:block;height:100%;background:currentColor;transform:scaleX(0);transform-origin:0 50%}
@keyframes up{from{opacity:0;transform:translateY(16px)}}
/* cards */
.sel{padding-block:clamp(70px,10vw,130px)}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 12px}.grid.dense{grid-template-columns:repeat(3,1fr)}.dense .card h3{font-size:13px}
.card{position:relative}.card a{text-decoration:none}.ph{overflow:hidden;background:#d9cdb4;aspect-ratio:4/5}.ph img{width:100%;height:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}.card:hover .ph img{transform:scale(1.05)}.card h3{margin-top:10px}.card p{font-size:15px}.card small{opacity:.65}
.hrt{position:absolute;top:4px;right:4px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}.hrt .ic{filter:drop-shadow(0 0 2px var(--cloth))}.hrt[aria-pressed=true]{color:var(--madder)}.hrt[aria-pressed=true] use{fill:var(--madder)}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
/* finder */
.finder{padding-bottom:clamp(70px,10vw,130px)}.inks{display:flex;gap:8px;overflow-x:auto;margin:22px calc(var(--gut)*-1) 22px 0;scrollbar-width:none;padding-bottom:4px}.inks button{flex:none;display:flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;min-height:44px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px}.inks i{width:24px;height:24px;border-radius:50%}.inks [aria-pressed=true]{background:var(--ink);color:var(--cloth)}
.frow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-right:calc(var(--gut)*-1)}.frow .card{flex:0 0 min(46vw,250px);scroll-snap-align:start}
/* desk + rann */
.desk{background:var(--indigo);color:var(--cloth);padding-block:clamp(60px,9vw,120px)}.dk{display:grid;gap:30px;align-items:center}.dk p:not(.kick){margin:14px 0 22px;max-width:30em}.dk h2{margin-top:8px}.dk img{width:100%;aspect-ratio:4/5;max-width:440px}.dk figcaption{font-size:14px;margin-top:8px}
.rann{position:relative;height:90svh;overflow:hidden;background:#1a2342;color:#fff7e6}.rann video{width:100%;height:100%}.rtxt{position:absolute;inset:auto 0 0;padding:90px var(--gut) 34px;background:linear-gradient(transparent,rgba(9,12,26,.88))}.rtxt p{margin:8px 0 14px}
/* footer */
.foot{background:var(--ink);color:var(--cloth);padding:56px var(--gut) 0;overflow:hidden}.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px 18px}.foot h3{font-size:13px;opacity:.65;margin-bottom:8px}.fgrid a{display:block;padding:5px 0;text-decoration:none}.fgrid p a{display:inline}.fword{font:400 33vw/.8 var(--dsp);color:var(--madder);margin-top:44px;transform:translateY(8%);white-space:nowrap}
/* panels */
.scrim{position:fixed;inset:0;background:rgba(23,18,14,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:30}.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;inset:0 0 0 auto;width:min(92vw,440px);background:var(--paper);z-index:31;transform:translateX(102%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s;display:flex;flex-direction:column}.drawer.on{transform:none;visibility:visible}
.dh{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:1px solid var(--line)}.dh h2{font-size:26px}.dh button{min-height:44px;text-decoration:underline}.dl{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 18px}.df{padding:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}.li img{width:64px;height:80px}.li a{text-decoration:none}.li small{display:block;opacity:.65}.qty{display:inline-flex;align-items:center;margin-top:4px}.qty button{width:36px;height:36px;box-shadow:inset 0 0 0 1px var(--line)}.qty span{min-width:30px;text-align:center}.qty.big{margin:18px 0}.qty.big button{width:48px;height:48px}
.sum{display:flex;justify-content:space-between;padding:6px 0}.sum.t{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:19px}.df .btn{margin-top:10px}
.sov{position:fixed;inset:0;background:var(--paper);z-index:32;padding:10px var(--gut);transform:translateY(-102%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s;overflow-y:auto;overscroll-behavior:contain}.sov.on{transform:none;visibility:visible}
.sbar{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--ink);padding:6px 0}.sbar input{flex:1;min-width:0;border:0;background:none;font-size:18px;height:48px;outline:0}.sbar button{min-height:44px;text-decoration:underline}.ssug{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:14px 0}.ssug button{padding:8px 12px;box-shadow:inset 0 0 0 1px var(--line);min-height:40px;font-size:14px}
.sres a{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none}.sres img{width:56px;height:70px}.sres small{display:block;opacity:.65}
.toast{position:fixed;left:50%;bottom:80px;transform:translate(-50%,20px);background:var(--ink);color:var(--cloth);padding:10px 16px;opacity:0;pointer-events:none;transition:.25s;z-index:40;font-size:14px}.toast.on{opacity:1;transform:translate(-50%,0)}
.pop{position:fixed;left:12px;right:12px;bottom:74px;z-index:25;background:var(--paper);box-shadow:0 18px 50px rgba(0,0,0,.35);padding:18px;display:grid;grid-template-columns:72px 1fr;column-gap:14px;align-items:center;transform:translateY(130%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.pop.on{transform:none}.pop h3{font:400 24px var(--dsp)}.pop p{font-size:14px;grid-column:2}.pb{grid-row:1/3;width:72px;height:72px;background:linear-gradient(135deg,#6b4325,#3f2412);color:#26130a;cursor:pointer;display:grid;place-items:center;transition:transform .15s}.pb svg{width:80%}.pop.hit .pb{transform:scale(.86);background:var(--madder);color:var(--cloth)}.x{position:absolute;top:4px;right:6px;min-height:40px;font-size:13px;text-decoration:underline}
/* inner pages */
.pg{padding-block:34px 70px}.pg h1{margin:6px 0 14px}.lead{font-size:clamp(18px,2vw,22px);max-width:38em;margin-bottom:26px}
.sbox{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--ink);margin:10px 0 16px}.sbox input{flex:1;height:48px;background:none;border:0;outline:0;font-size:16px;min-width:0}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--gut)*-1)}.chips button{flex:none;padding:9px 14px;min-height:42px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px}.chips [aria-pressed=true]{background:var(--madder);color:#fff}
.tools{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:16px 0;font-size:14px}.tr{display:flex;gap:8px;align-items:center}.tools select{background:none;border:0;border-bottom:1px solid var(--line);height:40px;max-width:150px}.dens{min-height:40px;text-decoration:underline}
.pdp{display:grid;gap:22px;padding-block:14px 50px}.gal{display:grid;gap:8px;margin-inline:calc(var(--gut)*-1)}.main{aspect-ratio:4/5;overflow:hidden;background:#d9cdb4}.main img,.main video{width:100%;height:100%}.main.vd{aspect-ratio:9/14}
.info h1{font-size:clamp(34px,4.6vw,58px);margin:6px 0 10px}.price{font-size:22px;margin-bottom:10px}.price small{font-size:14px;opacity:.65}.szs{border:0;padding:0;margin-top:18px}.szs legend{font-size:14px;margin-bottom:6px}.szs button{min-width:48px;min-height:44px;padding:0 12px;margin:0 6px 6px 0;box-shadow:inset 0 0 0 1px var(--line)}.szs [aria-pressed=true]{background:var(--ink);color:var(--cloth)}
.info>.lnk[data-w]{display:block;margin:14px 0;min-height:30px}.info>[data-w][aria-pressed=true]{color:var(--madder)}details{border-top:1px solid var(--line)}summary{padding:14px 0;cursor:pointer;font-weight:500}details p{padding-bottom:14px}
.pin{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:end;margin:18px 0}.pin output{grid-column:1/3;font-size:14px;color:var(--indigo)}.pin button{min-height:44px}
label{display:block;font-size:14px;margin-bottom:14px}input:not([type=radio],[type=range],[type=search]),textarea,.cl select{display:block;width:100%;min-height:48px;background:var(--paper);border:1px solid var(--line);padding:10px 12px;font-size:16px;margin-top:4px}
.rel{padding-bottom:60px}.rel h2{margin-bottom:22px}.buybar{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));z-index:19;background:var(--paper);display:flex;justify-content:space-between;align-items:center;padding:8px var(--gut);border-top:1px solid var(--line)}.buybar .btn{padding-block:10px;min-height:44px}.buybar:empty{display:none}
.cog{display:grid;gap:30px}fieldset{border:0;padding:0;margin-bottom:22px}legend{font:400 24px var(--dsp);margin-bottom:12px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rd{display:flex;gap:10px;align-items:center;min-height:44px;font-size:16px}.err{color:var(--madder);margin-top:10px;min-height:1.5em}.osum{background:var(--paper);padding:16px;align-self:start}.okk{padding:50px 0}.okk .ic{width:56px;height:56px;color:var(--madder)}
.tf{display:grid;gap:10px;max-width:440px;margin-top:18px}.tf label{margin:0}#tres{margin-top:30px}.tl{list-style:none;padding:0;margin-top:16px;max-width:440px}.tl li{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);opacity:.45}.tl .on{opacity:1}.tl .on .ic{color:var(--madder)}.tl .now{font-weight:700}
.calc{display:grid;gap:26px;background:var(--paper);padding:18px}.calc b{float:right}.calc input[type=range]{width:100%;height:44px;accent-color:var(--madder)}.cr{display:grid;gap:14px}.cr img{width:100%;aspect-ratio:4/3}.cr dl{display:grid;grid-template-columns:1fr auto;gap:8px}.cr dd{margin:0;font-weight:500;text-align:right}.big{font:400 34px var(--dsp)!important;color:var(--madder)}
.abg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:30px 0}.abg img{width:100%;aspect-ratio:4/5}.gl{margin:14px 0 30px;max-width:44em}.gl dt{font:400 22px var(--dsp);margin-top:14px}.gl dd{margin:0}.hp{max-width:780px}
@media(min-width:900px){body{padding-bottom:0}.bot,.buybar{display:none}.nav{display:flex;margin-right:auto}.logo{margin-right:0}.top{gap:30px}.searchbtn{box-shadow:inset 0 0 0 1px var(--line);padding:0 16px 0 10px}.searchbtn span{display:inline}.hideS{display:grid}
.film{grid-template-columns:repeat(3,1fr)}.film video[data-wide]{display:block}.band{padding-bottom:32px}.band h1{font-size:clamp(90px,12.6vw,210px);display:flex;gap:.22em;margin:4px 0 14px}.band em{display:inline}#cloth{transform-origin:50% 26%}
.grid{grid-template-columns:repeat(4,1fr);gap:40px 18px}.grid.dense{grid-template-columns:repeat(6,1fr)}.feat{grid-template-columns:repeat(12,1fr)}.feat .card{grid-column:span 3}.feat .card:nth-child(1){grid-column:span 6;grid-row:span 2}.feat .card:nth-child(1) .ph{aspect-ratio:auto;height:calc(100% - 60px)}.main.vd{aspect-ratio:4/5}
.dstage{grid-template-columns:1fr 1fr;grid-template-rows:none;align-items:center;gap:60px}.dsvg{width:min(70svh,40vw)}.dtxt{text-align:left;margin:0}.dbar{bottom:0}.dk{grid-template-columns:1fr 1fr}.fgrid{grid-template-columns:repeat(4,1fr)}
.pdp{grid-template-columns:1.15fr 1fr;gap:50px;align-items:start;padding-top:30px}.gal{margin:0;grid-template-columns:1fr 1fr}.gal .main:only-child{grid-column:span 2;max-width:640px}.info{position:sticky;top:84px}.cog{grid-template-columns:1.3fr 1fr}.calc{grid-template-columns:1fr 1fr;padding:34px}.pop{left:auto;right:24px;bottom:24px;width:380px}.toast{bottom:30px}.rann{height:96svh}.rann video{object-position:50% 60%}.hang{flex-basis:340px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
