@font-face{font-family:"Caslon D";src:url(../fonts/libre-caslon-display-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caslon T";src:url(../fonts/libre-caslon-text-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caslon T";font-style:italic;src:url(../fonts/libre-caslon-text-400i.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caslon T";font-weight:700;src:url(../fonts/libre-caslon-text-700.woff2) format("woff2");font-display:swap}
:root{--ink:#F4EDE1;--ink2:#EDE3D2;--paper:#1F1D18;--mute:#6A6153;--green:#0F3D2E;--green2:#16533F;--gold:#B08A3A;--gold2:#8A6A22;--dk:#1F1D18;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.6 "Caslon T",Georgia,serif;overflow-x:clip}
@media(min-width:1024px){body{font-size:18px}}
img{display:block;max-width:100%;height:auto}a{color:inherit}
html[lang=ms] .en,html[lang=en] .ms{display:none!important}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);color:var(--ink);padding:8px 12px}
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:linear-gradient(rgba(244,237,225,.96),rgba(244,237,225,0))}
.brand{display:flex;gap:8px;align-items:center;text-decoration:none;font:400 21px/1 "Caslon D",serif;letter-spacing:-.01em}.brand svg{width:20px}
.lang{display:flex;border:1px solid rgba(201,161,74,.5);border-radius:99px;overflow:hidden}
.lang button{background:none;border:0;color:var(--paper);font:700 13px/1 "Caslon T",serif;padding:8px 12px;cursor:pointer}.lang button[aria-pressed=true]{background:var(--gold);color:var(--ink)}
.h-hero,.h2,.h3,.h-book{font-family:"Caslon D",serif;font-weight:400;letter-spacing:-.015em;line-height:1.02;margin:0}
.h-hero{font-size:clamp(52px,15vw,112px)}.h2{font-size:clamp(38px,10.5vw,76px)}.h3{font-size:30px;margin:4px 0 6px}.h-book{font-size:clamp(46px,13vw,104px)}
.vf{font:italic 400 13px/1.3 "Caslon T",serif;color:var(--gold2);background:rgba(201,161,74,.12);border-radius:4px;padding:1px 6px;white-space:nowrap}
.sample-tag{position:absolute;top:12px;left:12px;font:italic 14px "Caslon T",serif;background:rgba(14,15,12,.7);padding:3px 10px;border-radius:99px;color:var(--paper)}
.btn{display:inline-block;background:var(--green);color:#F4EDE1;text-decoration:none;font-weight:700;padding:15px 24px;border-radius:99px;transition:transform .3s var(--ease),background .3s}
.btn:hover{background:var(--green2);transform:translateY(-2px)}
.link{color:var(--gold2);text-decoration:none;border-bottom:1px solid rgba(226,194,122,.4);padding-bottom:2px}
.fine{font-size:14px;color:var(--mute);margin:10px 0 0}
/* thread */
.thread{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:5;overflow:visible}
.thread-ghost{fill:none;stroke:rgba(201,161,74,.28);stroke-width:1.4;stroke-dasharray:6 7}
.thread-line{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(226,194,122,.55))}
.needle{transition:opacity .3s}
main{position:relative}
/* hero */
.hero{height:190vh;position:relative}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid}
.hero-media{margin:0;position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--p,0)*.12));transform-origin:50% 30%}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,12,.35) 0%,rgba(14,15,12,0) 30%,rgba(14,15,12,.55) 55%,rgba(14,15,12,.95) 100%)}
.hero-copy{position:relative;z-index:2;align-self:end;padding:0 22px 40px;max-width:760px}
.h-hero .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);animation:wIn .9s var(--ease) forwards}
.h-hero .w:nth-child(2){animation-delay:.08s}.h-hero .w:nth-child(3){animation-delay:.16s}.h-hero .w:nth-child(4){animation-delay:.24s}
@keyframes wIn{to{opacity:1;transform:none}}
.hero-line2{font:italic 400 clamp(24px,6.5vw,40px)/1.2 "Caslon T",serif;color:var(--gold2);margin:10px 0 0;opacity:calc(var(--p,0)*3 - .4);transform:translateY(calc((1 - min(1,var(--p,0)*3))*16px))}
.hero-sub{max-width:34ch;margin:14px 0 22px}
.hero-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero .sample-tag{top:auto;bottom:16px;left:auto;right:16px;z-index:3}
@media(min-width:1024px){.hero-media{left:auto;width:46%}.hero-media:after{background:linear-gradient(90deg,var(--ink) 0,rgba(14,15,12,0) 30%)}.hero-copy{align-self:center;padding-left:6vw}}
.stitch-label{font:italic 400 20px/1.3 "Caslon T",serif;color:var(--gold2);margin:0;padding:48px 22px 24px 22px;position:relative;z-index:6}
.sl-1{text-align:right;padding-right:40px}
/* marquee */
.marquee{overflow:hidden;border-block:1px solid rgba(201,161,74,.25);padding:18px 0;font:400 30px/1 "Caslon D",serif;white-space:nowrap;background:var(--ink2)}
.mq-track{display:inline-block;transform:translateX(calc(var(--m,0)*-1px))}
.mq-track span{display:inline-block}
/* intro */
.intro{padding:90px 22px 40px;max-width:900px}
.quote{margin:0;font:400 clamp(30px,8.4vw,60px)/1.12 "Caslon D",serif;letter-spacing:-.015em}
.quote .ms,.quote .en{background:linear-gradient(90deg,var(--paper) 50%,rgba(31,29,24,.16) 50%) 100% 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;background-position:calc(100% - var(--q,0)*100%) 0}
.sl-2{padding-left:0;margin-top:40px}
/* lookbook */
.look{position:relative;height:calc(100vh + var(--lw,1600px))}
.look-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:26px}
.look-head{padding:0 22px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.hint{margin:0;color:var(--mute);font-style:italic;display:flex;align-items:center;gap:10px}
.hint-bar{width:70px;height:2px;background:rgba(201,161,74,.25);display:inline-block;overflow:hidden}.hint-bar i{display:block;height:100%;background:var(--gold);transform-origin:0;transform:scaleX(var(--lp,0))}
.look-track{display:flex;gap:34px;padding:0 22px;width:max-content;transform:translate3d(calc(var(--lx,0)*-1px),0,0);will-change:transform}
.card{width:min(74vw,380px,42vh);flex:none;position:relative;margin-top:30px;transform:rotate(calc(var(--sw,0)*-1.2deg));transform-origin:50% -28px}.card:before{content:"";position:absolute;left:50%;top:-30px;width:1px;height:30px;background:var(--gold)}.card:after{content:"";position:absolute;left:calc(50% - 4px);top:-34px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.card-img{position:relative;overflow:hidden;clip-path:inset(calc((1 - var(--rv,1))*100%) 0 0 0);border-radius:2px;aspect-ratio:4/5;background:var(--green)}
.card-img img{width:100%;height:118%;object-fit:cover;transform:translate3d(calc(var(--cx,0)*-26px),-6%,0) scale(1.08)}
.card-n{margin:12px 0 0;color:var(--gold);font-style:italic}
.card p{margin:4px 0}.price{font-size:15px;color:var(--mute)}
@media(max-height:760px) and (max-width:600px){.card{width:62vw}.h3{font-size:25px}.card p{font-size:15.5px}}
/* tape */
.tape-sec{height:240vh;position:relative}
.tape-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 22px;overflow:hidden}
.lede{font-style:italic;color:var(--gold2);font-size:20px;margin:10px 0 30px}
.tape-wrap{position:relative;padding-left:56px}
.tape-roll{position:absolute;left:0;top:-12px;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,#0E0F0C 0 8px,#D8B865 9px 12px,#C9A14A 13px 100%);box-shadow:inset 0 0 0 3px #a98535,0 10px 24px rgba(0,0,0,.5);transform:rotate(calc(var(--t,0)*900deg));z-index:2}
.tape-roll i{position:absolute;inset:6px;border-radius:50%;background:repeating-conic-gradient(rgba(14,15,12,.35) 0 3deg,transparent 3deg 12deg)}
.tape{position:relative;background:linear-gradient(#E2C27A,#C9A14A);color:var(--dk);border-radius:2px;clip-path:inset(0 calc((1 - var(--t,0))*100%) 0 0);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.tape-ticks{height:38px;background:repeating-linear-gradient(90deg,var(--dk) 0 1px,transparent 1px 8px) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,var(--dk) 0 1.5px,transparent 1.5px 40px) 0 0/100% 20px no-repeat}
.steps{list-style:none;margin:0;padding:6px 14px 18px;display:grid;gap:14px;counter-reset:s}
.steps li{counter-increment:s;font-size:16px;line-height:1.4;opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .6s var(--ease)}
.steps li.on{opacity:1;transform:none}
.steps li b:first-child{display:block;font:400 26px/1.1 "Caslon D",serif;letter-spacing:-.01em}
.steps li b:first-child:before{content:counter(s) " cm  ";font:italic 14px "Caslon T",serif;white-space:pre}
.steps .vf{color:#5a4413;background:rgba(14,15,12,.1);white-space:normal}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
/* songket */
.songket{display:grid;gap:30px;padding:100px 22px;align-items:center;background:var(--ink2)}
.sk-img{margin:0;position:relative;overflow:hidden;clip-path:inset(calc((1 - var(--s,1))*50%) 0 calc((1 - var(--s,1))*50%) 0)}
.sk-img img{transform:scale(calc(1.25 - var(--s,1)*.25))}
@media(min-width:1024px){.songket{grid-template-columns:2fr 3fr;padding:140px 8vw}}
/* faq */
.faq{padding:90px 22px;max-width:860px}
details{border-bottom:1px solid rgba(201,161,74,.25);padding:18px 0}
summary{cursor:pointer;font:400 22px/1.3 "Caslon D",serif;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary:after{content:"+";color:var(--gold);transition:transform .3s}details[open] summary:after{transform:rotate(45deg)}
summary::-webkit-details-marker{display:none}
/* book */
.book{padding:80px 22px 120px;text-align:left;background:var(--green);color:#F4EDE1}.book .vf{color:#E2C27A;background:rgba(226,194,122,.14)}.book .fine,.book dt{color:#D9CDB4}.book .btn{background:#E2C27A;color:var(--dk)}.book .stitch-label{color:#E2C27A}
.book .stitch-label{padding:0 0 24px}
.book .btn{margin-top:26px}
.info{display:grid;gap:18px;margin:44px 0 0}
.info dt{color:var(--gold);font-style:italic}.info dd{margin:2px 0 0}
@media(min-width:1024px){.book,.intro,.faq{padding-left:8vw;padding-right:8vw}.info{grid-template-columns:repeat(3,1fr)}}
.foot{padding:30px 22px 100px;color:var(--mute);font-size:14px;border-top:1px solid rgba(201,161,74,.2)}
.fab{position:fixed;right:16px;bottom:16px;z-index:30;background:#1f7a4f;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:12px 18px;border-radius:99px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
/* no-js / reduced motion */
html.no-js .hero,html.no-js .look,html.no-js .tape-sec{height:auto}
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .h-hero .w{opacity:1;transform:none}
 .hero,.look,.tape-sec{height:auto!important}
 .hero-pin,.look-pin,.tape-pin{position:relative;height:auto;min-height:0}
 .hero-pin{min-height:100svh}
 .cloth,.thread{display:none}
 .hero-line2{opacity:1;transform:none}
 .look-track{flex-direction:column;width:auto;transform:none!important}.card{width:auto;max-width:420px}
 .card-img img{transform:none;height:100%}.card{transform:none}.card-img{clip-path:none}
 .tape-pin{padding:90px 22px}.tape{clip-path:none}.tape-roll{transform:none}.steps li{opacity:1;transform:none}
 .quote .ms,.quote .en{background:none;color:var(--paper)}
 .mq-track{transform:none;white-space:normal}.marquee{white-space:normal}
 .sk-img{clip-path:none}.sk-img img{transform:none}
}

/* v5.1 hero peel */
.cloth-3d{position:absolute;inset:0;z-index:1;perspective:1100px;perspective-origin:50% 0;pointer-events:none}
.cloth{position:absolute;inset:-2% -2% auto;height:104%;transform-origin:50% 0;transform:rotateX(calc(var(--pk,0)*-100deg)) translateZ(0);background:
 radial-gradient(120% 60% at 30% 0,rgba(255,240,200,.10),transparent 60%),
 repeating-linear-gradient(135deg,rgba(201,161,74,.16) 0 2px,transparent 2px 16px),
 repeating-linear-gradient(45deg,rgba(201,161,74,.12) 0 2px,transparent 2px 16px),
 linear-gradient(180deg,#0F3D2E 0%,#124734 70%,#0b2f23 100%);
 box-shadow:0 30px 60px rgba(0,0,0,.6);backface-visibility:visible;will-change:transform}
.cloth:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,calc(var(--pk,0)*.7)) 100%)}
.curl{position:absolute;left:0;right:0;bottom:-1px;height:calc(18px + var(--pk,0)*90px);background:linear-gradient(180deg,#0b2f23 0%,#1d6b4f 35%,#E2C27A 52%,#1d6b4f 64%,#06231a 100%);border-radius:0 0 50% 50%/0 0 100% 100%;box-shadow:0 18px 26px rgba(0,0,0,.55);border-bottom:2px dashed rgba(226,194,122,.8)}
.cast{position:absolute;left:0;right:0;top:0;z-index:1;height:calc((1 - var(--pk,0))*100%);background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.65));opacity:calc(1 - var(--pk,0));pointer-events:none}
/* v5.1 lookbook hangers */
.look-pin{z-index:6}
.look-track{gap:46px}
.card{transform:none!important;margin-top:46px}.card:before,.card:after{display:none}
.hang{position:relative;transform-origin:50% -40px;transform:rotate(calc(var(--a,0)*1deg));will-change:transform}
.hook{position:absolute;left:50%;top:-44px;width:60px;height:44px;margin-left:-30px;overflow:visible}
.card-img{transform-origin:50% 0;transform:skewX(calc(var(--a,0)*-.6deg)) scaleY(calc(1 + var(--a2,0)*.004))}
.look-rail{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 10%,var(--gold) 90%,transparent);opacity:.6}
/* v5.1 marquee */
.marquee{padding:26px 0;display:grid;gap:6px;position:relative;z-index:6;font-size:clamp(46px,13vw,92px)}
.mq-row{overflow:hidden;white-space:nowrap}
.mq-row.r2 .mq-track{font-style:italic;color:transparent;-webkit-text-stroke:1px var(--gold);transform:translateX(calc(var(--m2,0)*-1px))}
.mq-track{transform:translateX(calc(var(--m,0)*-1px)) skewX(calc(var(--v,0)*-1deg))}
.intro,.faq{position:relative;z-index:6}
@media (prefers-reduced-motion:reduce){.cloth-3d,.cast{display:none}.hang,.card-img{transform:none!important}.mq-row{white-space:normal}.mq-row.r2{display:none}}

/* v5.1 light editorial theme */
.lang button[aria-pressed=true]{color:#F4EDE1;background:var(--green)}
.sample-tag{color:#F4EDE1}
.thread-line{filter:none;stroke:#B08A3A}.needle path{fill:#6A6153}
.hero{background:var(--ink)}
.hero-media{inset:64px 14px auto;height:40%;border-radius:2px;overflow:hidden}
.hero-media:after{background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.25))}
.hero-copy{align-self:end;padding-bottom:28px}
.h-hero{font-size:clamp(48px,13.5vw,112px)}
.hero-sub{margin:10px 0 18px}
.hero .sample-tag{bottom:12px;right:12px}
.issue{position:absolute;top:70px;right:24px;z-index:3;font:italic 15px "Caslon T",serif;color:#F4EDE1;text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media(min-width:1024px){.hero-media{inset:90px 5vw 60px auto;width:42%;height:auto}.hero-media:after{background:none}.hero-copy{align-self:center;padding-left:6vw;max-width:52%}}
.marquee{background:var(--ink);border-color:rgba(31,29,24,.18)}
.mq-row.r2 .mq-track{-webkit-text-stroke:1px var(--green)}
.card-img{box-shadow:0 18px 30px rgba(31,29,24,.18)}
.card-n{color:var(--green)}
.intro{border-top:1px solid rgba(31,29,24,.15)}
.quote{font-style:italic}
.steps li b:first-child:before{color:#5a4413}
.tape{box-shadow:0 14px 30px rgba(31,29,24,.25)}
.faq details{border-color:rgba(31,29,24,.18)}summary:after{color:var(--green)}
.foot{border-color:rgba(31,29,24,.15)}
.dropcap:first-letter{float:left;font:400 88px/.8 "Caslon D",serif;color:var(--green);padding:6px 10px 0 0}