/* Design A · Atelier — cream editorial, luminous products */
:root{--bg:#F3EDE2;--introbg:#F3EDE2;--card:#FAF7F0;--ink:#1A1814;--mut:#8A8174;--body:#4a453d;--line:#E0D7C7;--line2:#1A1814;--acc:#A88A52;--navbg:rgba(243,237,226,.88);--ghost:#e6ddcc;--btn:#1A1814;--btntxt:#FAF7F0;--hover:#FAF7F0;--chip:#E9E1D2;--r:2px}
.halo{inset:6%;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.85) 22%,rgba(255,252,244,.35) 45%,rgba(243,237,226,0) 68%);transition:transform 1.2s var(--ease),opacity 1s;opacity:.85}
.floor{left:30%;right:30%;bottom:9%;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,45,25,.22),transparent);filter:blur(2px);transition:.9s}
.plate img{filter:drop-shadow(0 22px 22px rgba(70,52,28,.16))}
.item:hover .halo{transform:scale(1.12);opacity:1}
.item:hover .floor{transform:scaleX(.8);opacity:.6}
.cap{border-top:1px solid var(--line)}
.cap .ds{font-family:Cormorant;font-style:italic;font-size:18px}

/* home hero: colour orbs carousel */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;touch-action:pan-y}
.orb{position:absolute;top:50%;width:118vh;height:118vh;border-radius:50%;transform:translateY(-50%);transition:background 1.1s var(--ease)}
.orb.l{left:calc(50% - 118vh + 5vw)}.orb.r{right:calc(50% - 118vh + 5vw)}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 60%)}
@media(max-aspect-ratio:1/1){.orb{width:120vw;height:120vw}.orb.l{left:-80vw}.orb.r{right:-80vw}}
.glow{position:absolute;left:50%;top:46%;width:min(62vh,600px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.75) 30%,rgba(255,255,255,0) 68%);z-index:2;pointer-events:none}
.w{position:absolute;left:50%;top:46%;height:min(50vh,480px);width:auto;max-width:min(40vw,440px);object-fit:contain;transform:translate(-50%,-50%);transition:transform 1.05s var(--ease),opacity .8s var(--ease);pointer-events:none;filter:drop-shadow(0 28px 30px rgba(60,44,22,.25))}
.w.c{z-index:5;pointer-events:auto;cursor:pointer}
.w.l{transform:translate(calc(-50% - min(22vw,330px)),-44%) scale(.7);z-index:3}
.w.r{transform:translate(calc(-50% + min(22vw,330px)),-44%) scale(.7);z-index:3}
.w.ll{transform:translate(calc(-50% - min(44vw,660px)),-44%) scale(.5);opacity:0}
.w.rr{transform:translate(calc(-50% + min(44vw,660px)),-44%) scale(.5);opacity:0}
.w.h{opacity:0;transform:translate(-50%,-44%) scale(.4)}
.w.c:hover{transform:translate(-50%,-52%) scale(1.03)}
@media(max-width:700px){.w{height:34vh;max-width:56vw}.w.l{transform:translate(calc(-50% - 36vw),-44%) scale(.6)}.w.r{transform:translate(calc(-50% + 36vw),-44%) scale(.6)}}
.arr{position:absolute;top:46%;transform:translateY(-50%);z-index:10;width:48px;height:48px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.arr.p{left:var(--g)}.arr.n{right:var(--g)}
@media(max-width:700px){.arr{top:auto;bottom:31vh;transform:none}}
.ttl{position:absolute;left:0;right:0;bottom:10vh;text-align:center;z-index:10}
.ttl .label{color:var(--ink)}
.ttl h1{font-family:Syne;font-weight:800;font-size:clamp(32px,4.6vw,72px);letter-spacing:-.01em;line-height:1;text-transform:uppercase;margin:10px 0 14px}
.sw{display:inline-block;transition:opacity .45s,transform .6s var(--ease)}
.ttl.out .sw{opacity:0;transform:translateY(14px)}
.cnt{position:absolute;left:var(--g);bottom:10vh;z-index:10;font-family:Syne;font-weight:700;font-size:22px}
.cnt small{font-size:12px;opacity:.6}
.htag{position:absolute;right:var(--g);bottom:10vh;z-index:10;font-family:Cormorant;font-style:italic;font-size:20px}
@media(max-width:700px){.cnt,.htag{bottom:4vh}.ttl{bottom:9vh}}

/* home collections tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4vw}
.tile{position:relative;aspect-ratio:4/5;background:var(--card);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:26px;transition:background .6s}
.tile:hover{background:#fff}
.tile .plate{position:absolute;inset:10% 8% 20%;aspect-ratio:auto}
.tile .plate img{height:78%}
.tile .t-no{position:relative;font-family:Syne;font-weight:700;font-size:12px;letter-spacing:.14em}
.tile .t-b{position:relative}
.tile h3{font-family:Syne;font-weight:800;font-size:clamp(18px,1.9vw,28px);text-transform:uppercase;line-height:1}
.tile .t-b span{display:block;margin-top:8px;font-size:13px;color:var(--mut)}
@media(max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tiles{grid-template-columns:1fr}.tile{aspect-ratio:4/3}}
.story2{display:grid;grid-template-columns:1fr 1.3fr;gap:6vw;align-items:center}
.story2 h2{font-size:clamp(42px,5.4vw,84px);line-height:1}
.story2 p{font-size:17px;line-height:1.75;color:var(--body);max-width:520px;margin:18px 0 28px}
.stack{position:relative;height:min(68vh,600px)}
.stack .plate{position:absolute;width:52%}
.stack .plate:nth-child(1){left:0;top:8%}.stack .plate:nth-child(2){left:30%;top:0;z-index:2}.stack .plate:nth-child(3){right:0;top:22%}
@media(max-width:860px){.story2{grid-template-columns:1fr}.stack{height:70vw}}

/* product stage */
.stagep{background:radial-gradient(70% 70% at 50% 45%,var(--orb),var(--bg) 78%)}
.stagep .halo{inset:10% 14%}
.stagep .floor{bottom:8%}
.stagep img{filter:drop-shadow(0 30px 30px rgba(70,52,28,.2))}