/* ===================== v4: the shopping experience ===================== */

/* ---------- product photos: always whole, never cropped ---------- */
.card .ph{background:linear-gradient(180deg,#F1E9DE,var(--panel))}
.card .ph img{object-fit:contain;object-position:center bottom;padding:7% 6% 0;filter:brightness(1.05) contrast(1.02);mix-blend-mode:multiply}
.feat .ph.frame img,.frame img,.mini .im img,.pframe img{filter:brightness(1.05) contrast(1.02)}
.feat .ph.frame{background:linear-gradient(180deg,#F1E9DE,var(--panel))}

/* ---------- header: logo, one menu, tools ---------- */
.hdr .row{grid-template-columns:1fr auto 1fr}
.hdr .nav,.hdr .cur{display:none!important}
.burger2{gap:14px}
.burger2 em{height:auto;font:500 12px/1 var(--sans);letter-spacing:.22em}

/* ---------- the menu: an arch gallery you walk into ---------- */
.menu{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(18px,3vh,34px);
  padding:calc(var(--head) + 24px) var(--gut) 26px;background:transparent;color:var(--ivory);
  transform:none!important;border-radius:0!important;clip-path:none;visibility:hidden;overflow:hidden;
  transition:visibility 0s 1.1s}
.menu.on{visibility:visible;transition:visibility 0s}
.menu::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 100%,#4a2340,var(--plum-deep) 70%);opacity:0;transition:opacity .6s var(--ease) .35s}
.menu.on::before{opacity:1;transition:opacity .55s var(--ease)}
.m-panels{position:relative;display:flex;gap:clamp(8px,1vw,14px);height:min(64vh,620px);align-items:flex-end}
.mp{position:relative;flex:1 1 0;min-width:0;height:100%;border-radius:999px 999px 18px 18px;overflow:hidden;background:#3a1e33;color:var(--ivory);
  transform:translateY(112%);transition:transform .55s cubic-bezier(.6,0,.8,.2) calc((5 - var(--i)) * 35ms),flex-grow .8s var(--ease)}
.menu.on .mp{transform:none;transition:transform 1.05s var(--ease) calc(.12s + var(--i) * 75ms),flex-grow .8s var(--ease)}
.mp video,.mp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s}
.mp video{filter:saturate(.85) brightness(.82)}
.mp:hover video,.mp:focus-visible video{filter:none;transform:scale(1.05)}
.mp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,19,38,0) 40%,rgba(42,19,38,.85));pointer-events:none}
.mp::before{content:"";position:absolute;inset:10px;z-index:2;border:1px solid rgba(226,192,138,.45);border-radius:999px 999px 12px 12px;pointer-events:none;transition:inset .6s var(--ease),border-color .4s}
.mp:hover::before{inset:6px;border-color:#E2C08A}
.m-panels:hover .mp{flex-grow:.8}
.m-panels .mp:hover,.m-panels .mp:focus-visible{flex-grow:2.6}
.mp .mp-tx{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 clamp(14px,1.6vw,26px) clamp(18px,2.4vh,30px);display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .4s var(--ease)}
.menu.on .mp .mp-tx{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(.55s + var(--i) * 75ms),transform .9s var(--ease) calc(.55s + var(--i) * 75ms)}
.mp-n{font:500 11px/1 var(--sans);letter-spacing:.2em;color:#E2C08A}
.mp-t{font:500 clamp(24px,2.4vw,40px)/1 var(--serif);white-space:nowrap}
.mp-c{font:400 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(247,241,232,.7);max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.mp:hover .mp-c,.mp:focus-visible .mp-c{max-height:20px}
.m-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px 30px;flex-wrap:wrap;border-top:1px solid rgba(194,153,90,.25);padding-top:18px;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .4s}
.menu.on .m-bottom{opacity:1;transform:none;transition:opacity .8s var(--ease) .7s,transform .9s var(--ease) .7s}
.m-bottom nav{display:flex;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap}
.m-bottom nav a{font:500 clamp(18px,1.6vw,24px)/1 var(--serif);color:var(--ivory);position:relative}
.m-bottom nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.m-bottom nav a:hover::after{transform:scaleX(1)}
.m-bottom .soc2{display:flex;gap:18px;font-size:13px;letter-spacing:.06em;color:rgba(247,241,232,.7)}
.m-bottom .soc2 a:hover{color:var(--ivory)}
@media (max-width:860px){
  .menu{justify-content:flex-start;overflow-y:auto}
  .m-panels{flex-direction:column;height:auto;gap:10px}
  .mp{flex:0 0 auto;height:clamp(76px,11vh,110px);border-radius:18px;transform:translateX(-110%)}
  .mp::before{border-radius:12px}
  .m-panels:hover .mp,.m-panels .mp:hover{flex-grow:0}
  .mp .mp-tx{flex-direction:row;align-items:baseline;gap:14px;top:0;justify-content:flex-start;align-items:center}
  .mp-c{display:none}
}

/* ---------- chapters: the collection as a scroll journey ---------- */
.chap{position:relative;background:var(--plum-deep);color:var(--ivory)}
.chap .stage2{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cbg{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity 1.1s var(--ease),transform 2.4s var(--ease)}
.cbg.on{opacity:1;transform:scale(1)}
.cbg video,.cbg img{width:100%;height:100%;object-fit:cover}
.chap .shade2{position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,19,38,.82) 0%,rgba(42,19,38,.45) 42%,rgba(42,19,38,.15) 62%,rgba(42,19,38,.55) 100%),linear-gradient(0deg,rgba(42,19,38,.7),rgba(42,19,38,0) 40%);pointer-events:none}
.chap .ui{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(20px,4vw,70px);align-items:center;padding:calc(var(--head) + 20px) var(--gut) 110px;max-width:1500px;margin:0 auto}
.ccs{position:relative;height:clamp(300px,46vh,440px)}
.cc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:20px;pointer-events:none}
.cc.on{pointer-events:auto}
.cc .num{font:500 clamp(70px,9vw,150px)/.8 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(226,192,138,.7);opacity:0;transform:translateY(30px);transition:opacity .6s,transform .9s var(--ease)}
.cc .label{color:#E2C08A;opacity:0;transition:opacity .6s}
.cc h2{color:var(--ivory);font-size:clamp(40px,5vw,78px);overflow:hidden}
.cc h2 em{color:#E2C08A}
.cc h2 .w{display:inline-block;transform:translateY(105%);transition:transform .5s cubic-bezier(.6,0,.8,.2)}
.cc p{color:rgba(247,241,232,.82);max-width:26em;font-size:17px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s var(--ease)}
.cc .btn{align-self:flex-start;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s var(--ease),background .4s,color .4s}
.cc.on .num{opacity:1;transform:none;transition:opacity 1s var(--ease) .05s,transform 1.2s var(--ease) .05s}
.cc.on .label{opacity:1;transition:opacity .9s var(--ease) .15s}
.cc.on h2 .w{transform:none;transition:transform 1s var(--ease) calc(.18s + var(--i) * 60ms)}
.cc.on p{opacity:1;transform:none;transition:opacity .9s var(--ease) .45s,transform 1s var(--ease) .45s}
.cc.on .btn{opacity:1;transform:none;transition:opacity .9s var(--ease) .6s,transform 1s var(--ease) .6s,background .4s,color .4s}
.crs{position:relative;height:clamp(300px,52vh,460px)}
.cr{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px);align-items:end;pointer-events:none}
.cr.on{pointer-events:auto}
.mini{display:flex;flex-direction:column;background:rgba(247,241,232,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px 999px 16px 16px;overflow:hidden;color:var(--ink);
  opacity:0;transform:translateY(60px) rotate(var(--r,0deg));transition:opacity .4s,transform .6s cubic-bezier(.6,0,.8,.2);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.cr.on .mini{opacity:1;transform:translateY(var(--y,0)) rotate(0deg);transition:opacity .9s var(--ease) calc(.25s + var(--i) * 110ms),transform 1.1s var(--ease) calc(.25s + var(--i) * 110ms),box-shadow .5s}
.mini:hover{box-shadow:0 40px 70px -30px rgba(0,0,0,.75),0 0 0 1px var(--gold)}
.mini .im{position:relative;aspect-ratio:3/4;background:linear-gradient(180deg,#F4ECE1,#E8DDCD)}
.mini .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:16% 6% 0;mix-blend-mode:multiply;transition:transform 1s var(--ease)}
.mini:hover .im img{transform:scale(1.05)}
.mini .tx{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.mini .nm{font:500 clamp(15px,1.15vw,19px)/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .pr{font:400 12px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.cnav{position:absolute;left:0;right:0;bottom:26px;display:flex;justify-content:center;gap:clamp(8px,2vw,28px);padding:0 var(--gut);z-index:3}
.cnav button{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:clamp(60px,9vw,130px);font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(247,241,232,.55);transition:color .4s}
.cnav button i{display:block;width:100%;height:1px;background:rgba(247,241,232,.25);position:relative;overflow:hidden}
.cnav button i b{position:absolute;inset:0;background:#E2C08A;transform-origin:left;transform:scaleX(0)}
.cnav button.on,.cnav button:hover{color:var(--ivory)}
.chap-intro{position:absolute;left:var(--gut);top:calc(var(--head) + 26px);z-index:3;color:#E2C08A}
/* static chapters: phones, touch, reduced motion */
.chap.static .stage2{position:relative;height:auto;overflow:visible}
.chap.static .cbgs,.chap.static .shade2,.chap.static .cnav,.chap.static .ui,.chap.static .chap-intro{display:none}
.cst{position:relative;min-height:86svh;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:90px var(--gut) 40px;overflow:hidden}
.cst .cbg{opacity:1;transform:none}
.cst::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,19,38,.15) 0%,rgba(42,19,38,.55) 45%,rgba(42,19,38,.9));z-index:1}
.cst>*:not(.cbg){position:relative;z-index:2}
.cst .cc{position:relative;inset:auto;pointer-events:auto}
.cst .cc .num{font-size:64px}
.cst .row3{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 6px;scrollbar-width:none}
.cst .row3::-webkit-scrollbar{display:none}
.cst .mini{flex:0 0 min(44vw,190px);scroll-snap-align:start;opacity:1;transform:none}
@media (max-width:1000px){.chap .ui{grid-template-columns:1fr}.crs{display:none}}

/* shop banner with the chapter film */
.phead .bg video{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.mp,.mini,.cc *{transition:none!important;transform:none!important;opacity:1!important}}
.cc{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.cc.on{opacity:1;visibility:visible;transition:opacity .2s,visibility 0s}
.cst .cc{opacity:1;visibility:visible}
.cr{visibility:hidden;transition:visibility 0s .7s}.cr.on{visibility:visible;transition:visibility 0s}
.cc h2{overflow:visible;line-height:1.08}
.cc h2 .w{opacity:0;transform:translateY(45%);transition:opacity .3s,transform .4s}
.cc.on h2 .w{opacity:1;transform:none;transition:opacity .9s var(--ease) calc(.18s + var(--i) * 60ms),transform 1s var(--ease) calc(.18s + var(--i) * 60ms)}
.cst .row3{scroll-padding-inline:var(--gut)}