/*
Theme Name: Two Threads
Theme URI: https://twothreads.store
Author: Two Threads
Description: Minimal luxury storefront theme for Two Threads.
Version: 1.1
Requires at least: 6.0
Text Domain: two-threads
*/

:root{--ink:#19110b;--paper:#fff;--muted:#6f6a66;--line:#e8e4e0;--soft:#f6f5f3}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Jost,system-ui,sans-serif;font-weight:300;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* header */
header{position:fixed;inset:0 0 auto;z-index:50;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 32px;color:#fff;transition:background .35s,color .35s,box-shadow .35s}
header.solid{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--line)}
.hl,.hr{display:flex;gap:28px;align-items:center;font-size:13px;letter-spacing:.04em}
.hr{justify-content:flex-end}
.hl button,.hr a{display:flex;gap:10px;align-items:center}
.wordmark{font-weight:400;font-size:24px;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em;white-space:nowrap}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3}
.bag{position:relative}.bag b{position:absolute;top:-6px;right:-9px;font-size:10px;font-weight:500}

/* menu drawer */
.drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .4s}
.drawer nav{position:absolute;inset:0 auto 0 0;width:min(420px,88vw);background:#fff;transform:translateX(-100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);padding:28px 40px;display:flex;flex-direction:column;gap:6px}
.drawer.open{pointer-events:auto}.drawer.open .scrim{opacity:1}.drawer.open nav{transform:none}
.drawer nav a{font-size:22px;padding:10px 0;border-bottom:1px solid transparent}
.drawer nav a:hover{border-color:var(--ink)}
.drawer .close{align-self:flex-start;margin-bottom:28px;font-size:13px;display:flex;gap:8px;align-items:center}
.drawer small{margin-top:auto;color:var(--muted);font-size:13px;line-height:1.8}

/* hero */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:#000}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero .slide.on{opacity:1}
.hero .slide img{transform:scale(1.08);transition:transform 7s linear}
.hero .slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45))}
.hero .cap{position:absolute;z-index:2;left:0;right:0;bottom:64px;text-align:center;color:#fff}
.hero .cap p{font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.hero .cap h1{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(38px,6vw,76px);line-height:1;margin-bottom:22px}
.link{display:inline-block;font-size:14px;letter-spacing:.04em;padding-bottom:3px;border-bottom:1px solid currentColor}
.dots{position:absolute;z-index:2;right:32px;bottom:32px;display:flex;gap:8px}
.dots i{width:22px;height:2px;background:rgba(255,255,255,.4)}.dots i.on{background:#fff}

/* sections */
section{padding:96px 32px}
.h2{text-align:center;font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.12;margin-bottom:12px}
.sub{text-align:center;color:var(--muted);font-size:15px;margin-bottom:48px}
.kicker{text-align:center;font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1400px;margin:0 auto}
.cat{background:var(--soft)}
.cat .im{aspect-ratio:3/4;overflow:hidden}
.cat .im img{transition:transform 1s ease}
.cat:hover .im img{transform:scale(1.04)}
.cat span{display:block;text-align:center;padding:16px 8px 20px;font-size:14px;letter-spacing:.03em}

/* campaign */
.campaign{padding:0}
.banner{position:relative;height:92vh;min-height:520px;overflow:hidden;color:#fff}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 45%)}
.banner .cap{position:absolute;z-index:2;inset:auto 0 56px;text-align:center}
.banner .cap p{font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:12px}
.banner h2{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(34px,5vw,64px);margin-bottom:18px}
.split{display:grid;grid-template-columns:1fr 1fr;height:92vh;min-height:520px}
.split>div{position:relative;overflow:hidden}
.row{padding:56px 0 80px}
.row .track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 32px;scrollbar-width:none}
.row .track::-webkit-scrollbar{display:none}
.card{flex:0 0 calc((100% - 36px)/4.3);scroll-snap-align:start;min-width:220px}
.card .im{aspect-ratio:3/4;background:var(--soft);overflow:hidden;position:relative}
.card .im img{transition:transform 1s}
.card:hover .im img{transform:scale(1.04)}
.card .wish{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center}
.card .wish.on .ico{fill:var(--ink)}
.card h3{font-weight:400;font-size:14px;margin:14px 2px 4px}
.card p{font-size:13px;color:var(--muted);margin:0 2px}
.row .more{text-align:center;margin-top:36px}

/* story */
.story{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center;max-width:1240px;margin:0 auto}
.story .im{aspect-ratio:4/5;overflow:hidden}
.story h2{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(32px,3.4vw,48px);line-height:1.1;margin:14px 0 22px}
.story p{color:#3c3632;line-height:1.85;font-size:16px;margin-bottom:18px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:28px 0 34px;border-top:1px solid var(--line);padding-top:24px}
.values b{display:block;font-weight:400;font-size:14px;margin-bottom:4px}
.values span{font-size:13px;color:var(--muted);line-height:1.5}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:22vw;gap:8px;max-width:1500px;margin:0 auto}
.gallery a{overflow:hidden}
.gallery a:nth-child(1){grid-column:span 2;grid-row:span 2}
.gallery a:nth-child(6){grid-column:span 2;grid-row:span 2}
.gallery img{transition:transform 1s, filter .4s}
.gallery a:hover img{transform:scale(1.05)}

/* services */
.services{background:var(--soft);display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center;padding:72px 32px}
.services .ico{width:26px;height:26px;margin:0 auto 16px}
.services b{display:block;font-weight:400;font-size:15px;margin-bottom:8px}
.services span{font-size:13px;color:var(--muted);line-height:1.6}

footer{padding:64px 32px 32px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:1240px;margin:0 auto 56px}
.fgrid h4{font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.fgrid a,.fgrid p{display:block;font-size:14px;color:var(--muted);line-height:2.1}
.fgrid a:hover{color:var(--ink)}
.news{display:flex;border-bottom:1px solid var(--ink);margin-top:8px}
.news input{flex:1;border:0;outline:0;font:inherit;font-size:14px;padding:10px 0;background:none;color:var(--ink)}
.fwm{text-align:center;font-size:26px;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase}
.copy{text-align:center;font-size:12px;color:var(--muted);margin-top:14px}

/* toast + reveal */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:13px;padding:14px 22px;opacity:0;transition:.35s;z-index:70;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  header{padding:0 16px;height:60px}
  .hl .t,.hr .t,.hr .hide-m{display:none}
  .hl,.hr{gap:18px}
  .wordmark{font-size:17px;letter-spacing:.3em}
  section{padding:64px 16px}
  .cats{grid-template-columns:repeat(2,1fr);gap:8px}
  .split{grid-template-columns:1fr;height:auto}.split>div{height:70vh}
  .row .track{padding:0 16px}
  .card{flex-basis:68%}
  .story{grid-template-columns:1fr;gap:36px}
  .values{grid-template-columns:1fr;gap:14px}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:56vw}
  .gallery a:nth-child(6){grid-column:span 2;grid-row:span 1}
  .gallery a:nth-child(1){grid-row:span 1}
  .services{grid-template-columns:1fr;gap:32px;padding:56px 16px}
  .fgrid{grid-template-columns:1fr 1fr}
  .fwm{font-size:18px;letter-spacing:.35em}
  .dots{right:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 3D fabric */
.fabric{position:relative;height:100vh;min-height:560px;background:radial-gradient(120% 90% at 50% 40%,#2a211b 0,#140e0a 70%);color:#f3ede6;overflow:hidden;padding:0}
.fabric canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.fabric canvas:active{cursor:grabbing}
.fabric .cap{position:absolute;z-index:2;left:0;right:0;top:72px;text-align:center;pointer-events:none;padding:0 16px}
.fabric .cap p{font-size:12px;letter-spacing:.26em;text-transform:uppercase;opacity:.75;margin-bottom:12px}
.fabric .cap h2{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(34px,5vw,62px);line-height:1.05}
.fabric .hint{position:absolute;z-index:2;left:0;right:0;bottom:40px;text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;pointer-events:none}
.fabric .fallback{position:absolute;inset:0;opacity:.55}
.fabric.gl .fallback{display:none}