/* ===== base ===== */
:root{color-scheme:light;--bg:#fff;--fg:#1a1a1a;--mute:#8a8a8a;--line:#ececec;--acc:#a39888;--card:#f6f5f3;
--d:"Cormorant Garamond",Georgia,serif;--b:"Jost",system-ui,sans-serif;
padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--b);line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
a{color:inherit}
h1,h2,h3{font-family:var(--d);font-weight:300;line-height:1.05;letter-spacing:.01em}
main{min-height:80vh}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===== background dots ===== */
#bg-dots{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#d2d2d2 1px,transparent 1.5px);background-size:30px 30px;opacity:.7;animation:drift 5s linear infinite,breathe 4s ease-in-out infinite}
@keyframes drift{to{background-position:30px 30px}}
@keyframes breathe{50%{opacity:.35}}

/* ===== loader ===== */
#loader{position:fixed;inset:0;background:#fff;color:#1a1a1a;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:transform .9s cubic-bezier(.77,0,.18,1)}
#loader.done{transform:translateY(-100%)}
#loader .w{font-family:var(--d);font-size:clamp(2.2rem,11vw,7rem);display:flex;overflow:hidden;padding:0 .1em}
#loader .w span{display:inline-block;transform:translateY(110%);animation:up .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes up{to{transform:none}}
#loader .bar{width:min(320px,70vw);height:1px;background:#00000014}
#loader .bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
#loader small{letter-spacing:.3em;font-size:.7rem;color:#9a958b}

/* ===== header / nav / footer ===== */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(18px,4vw,48px);background:#ffffffd9;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--d);font-size:1.4rem;text-decoration:none;letter-spacing:.02em}
nav{display:flex;gap:clamp(12px,2.5vw,32px);flex-wrap:wrap;justify-content:flex-end}
nav a{text-decoration:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover,nav a.on{border-color:var(--acc)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:28px clamp(18px,4vw,48px);border-top:1px solid var(--line);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* ===== pages & reveal ===== */
.page{display:none;padding:0 clamp(18px,4vw,48px)}
.page.on{display:block}
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}
.lg{display:block;width:auto;max-width:100%}
.hd{height:30px}.hl{height:clamp(70px,22vw,200px);margin:0 auto}.ld{height:clamp(60px,16vw,130px);animation:fade 1s both}

/* ===== buttons ===== */
.btn{display:inline-block;border:1px solid var(--fg);border-radius:999px;color:var(--fg);padding:13px 32px;text-decoration:none;letter-spacing:.14em;font-size:.78rem;transition:all .3s}
.btn:hover{background:var(--fg);color:#fff}

/* ===== hero ===== */
.hero{min-height:calc(100svh - 70px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6vh 0}
.hero h1{font-size:clamp(2.8rem,13vw,10rem);letter-spacing:.14em;font-weight:300;padding-left:.14em}
.hero h1 em{display:block;font-size:.24em;letter-spacing:.05em;margin-top:.7em;color:var(--mute);font-weight:300}
.hero p{max-width:440px;color:var(--mute);margin:26px auto 36px;font-weight:300}

/* ===== home collections ===== */
.sec{padding:clamp(48px,9vw,110px) 0}
.sec>h2{font-size:clamp(2rem,6vw,4.5rem);margin-bottom:36px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.cc{display:block;text-decoration:none;position:relative}
.cc .meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;gap:12px}
.cc h3{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.cc .meta span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);white-space:nowrap}
.man{font-family:var(--d);font-style:italic;font-weight:300;font-size:clamp(1.8rem,5vw,3.6rem);line-height:1.15;max-width:20ch;margin:0 auto;text-align:center}

/* ===== photo boxes & slideshow ===== */
.ph{background:var(--card);aspect-ratio:4864/3242;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;padding:16px;border-radius:22px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.cc:hover .ph img,.it:hover .ph img{transform:scale(1.05)}
.ph b{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);position:relative}
.ph.k{background:#1c1c1c}.ph.k b{color:#999}
.ss .s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translateX(100%)}
.ss .s.on{transform:none;transition:transform .9s cubic-bezier(.65,0,.25,1)}
.ss .s.out{transform:translateX(-100%);transition:transform .9s cubic-bezier(.65,0,.25,1)}
.ss .s.k{background:#1c1c1c}.ss .s.k b{color:#999}
.ss-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:2;mix-blend-mode:difference}
.ss-dots i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.4;transition:opacity .4s}
.ss-dots i.on{opacity:1}

/* ===== collections page ===== */
.ch{padding:clamp(40px,8vw,100px) 0 40px;border-bottom:1px solid var(--line)}
.ch h1{font-size:clamp(2.6rem,11vw,9rem)}
.tabs{display:flex;gap:clamp(24px,6vw,70px);margin-top:36px;flex-wrap:wrap}
.tb{background:none;border:0;border-bottom:1px solid transparent;font-family:var(--d);font-weight:300;font-size:clamp(1.4rem,3.4vw,2.1rem);color:var(--mute);cursor:pointer;text-align:left;padding:0 0 8px;transition:color .3s}
.tb small{display:block;font-family:var(--b);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
.tb.on{color:var(--fg);border-color:var(--fg)}
.cp{display:none}.cp.on{display:block;animation:fade .6s}
.cd{color:var(--mute);max-width:520px;margin-top:36px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);padding:40px 0 80px}
@media (max-width:700px){.grid{grid-template-columns:1fr}}
.it h3{font-size:1.1rem;margin-top:12px}
.it p{font-size:.85rem;color:var(--mute)}
.it p.so{color:#b3261e;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.it .ph,.it h3{cursor:pointer}
.sl{display:none}.sl.on{display:block;animation:fade .4s}
.vt{display:flex;gap:18px;margin-top:10px}
.vt button{background:none;border:0;border-bottom:1px solid transparent;font:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);cursor:pointer;padding:0 0 2px}
.vt .on{color:var(--fg);border-color:var(--fg)}
.ir{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ord{flex:none;border:1px solid var(--fg);border-radius:12px;padding:11px 18px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.ord:hover{background:var(--fg);color:#fff}

/* ===== about & contact ===== */
.ab{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,5vw,80px);padding:clamp(40px,8vw,100px) 0}
.ab h1,.ct h1{font-size:clamp(2.6rem,9vw,7rem)}
.ab .tx p{margin-bottom:18px;color:var(--mute);font-size:1.05rem}
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.box{border-top:1px solid var(--line);padding:22px 0}
.box h3{font-size:1.25rem;margin-bottom:10px}
.box p{color:var(--mute);font-size:.92rem}
.box small{display:block;color:var(--acc);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;margin-bottom:12px}
.ct{padding:clamp(40px,8vw,100px) 0}
.ct>p{max-width:480px;color:var(--mute);margin:22px 0 44px}
.ln{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 0;border-top:1px solid var(--line);text-decoration:none;font-family:var(--d);font-weight:300;font-size:clamp(1.5rem,5vw,3.2rem);word-break:break-word;transition:padding .3s,color .3s}
.ln:last-of-type{border-bottom:1px solid var(--line)}
.ln:hover{color:var(--acc);padding-left:14px}
.ln small{font-family:var(--b);font-size:.7rem;letter-spacing:.2em;color:var(--mute);flex:none}

/* ===== image zoom (product page) ===== */
#zoom{position:fixed;inset:0;z-index:90;background:#fffffff2;display:none;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 56px) 20px 24px;cursor:zoom-out}
#zoom.on{display:flex;animation:fade .3s}
#zoom img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
#zoom button{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:20px;background:none;border:0;font-size:2.2rem;line-height:1;cursor:pointer;color:var(--fg)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}#bg-dots{animation:none!important}}