/* ---------- shop story ----------
   A single product carries the opening through three scroll beats.
   JS publishes only transform/opacity values; the document remains
   complete and linear when motion is reduced or scripting is absent. */
.shop-story{
  --story-progress:0;
  /* 380 viewport-heights of usable pinned travel after subtracting
     the visible stage. This gives each of the three motion beats
     enough scroll distance to feel deliberate rather than rushed. */
  position:relative;height:480svh;background:#fff;color:var(--ivory);
  isolation:isolate;
}
/* Ground is white, not bone. The product shot carries a pure #FFFFFF
   backdrop and its mask feathers that white outward, so on the warmer
   bone ground it read as a lit halo around the jar. The sage tint made it
   worse: it was centred at 51%/62% — directly behind the jar — so the one
   spot that needed to match white was the one spot being darkened. Ground
   matches the product's own backdrop now and the halo has nothing to show
   up against. Texture stays, at a lower load so it does not rebuild the
   contrast it was just removed to avoid. */
.shop-story__stage{
  position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;
  background:
    radial-gradient(62% 44% at 51% 62%,rgba(124,131,112,.03),transparent 72%),
    /* wash the dune texture toward white. Whitening only the base colour
       did nothing visible — the texture layer sits ON TOP of it, so the
       product's white backdrop was still contrasting against bone ripples,
       not against the base. This lifts the texture itself. */
    linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),
    url('img/texture-dunes-bone.webp') center/cover no-repeat,
    #fff;
}
.shop-story__word{
  position:absolute;z-index:0;left:50%;bottom:-.16em;
  font-family:'Expose',sans-serif;font-size:clamp(11rem,26vw,28rem);font-weight:500;
  line-height:.78;letter-spacing:-.065em;color:rgba(33,29,24,.055);white-space:nowrap;
  opacity:var(--word-opacity,1);
  transform:translate3d(calc(-50% + var(--word-x,0) * 1vw),calc(var(--word-y,0) * 1vh),0)
            scale(var(--word-scale,1));
  transform-origin:50% 80%;will-change:transform,opacity;
}
.shop-story__copy,.shop-story__aside{position:absolute;z-index:4;margin:0;will-change:transform,opacity}
.shop-story__copy--opening{left:clamp(24px,4.2vw,72px);top:clamp(112px,16vh,170px);
  /* measured: the jar's rest position starts at ~36vw from 900-1990, and at
     56vw this block ran under it at every width (97x155px overlap at 1500).
     34vw ends the copy before the jar begins. */
  max-width:min(30vw,600px)}   /* 34vw still kissed the jar by 13-16px at 900-1500: the left offset sits outside the width */
.shop-story__copy--opening .crumb{display:block;margin-bottom:clamp(24px,4vh,52px);color:var(--sage-label)}
.shop-story__copy--opening .shop-story__title{
  max-width:none;font-size:clamp(3.25rem,5.8vw,6.8rem);line-height:.89;letter-spacing:-.04em;
}
.shop-story__title em{font-family:var(--script);font-weight:400;font-style:italic;color:var(--salmon)}
.shop-story__note{margin-top:clamp(22px,3.4vh,40px);max-width:23em;color:var(--ivory-dim);font-size:clamp(.9rem,1.15vw,1.08rem)}
.shop-story__note .nb{display:none}
.shop-story__aside{
  right:clamp(24px,4.2vw,72px);top:43%;max-width:19em;text-align:right;
  font-size:clamp(1.05rem,1.65vw,1.55rem);line-height:1.16;font-weight:500;
}
.shop-story__copy--statement{
  text-align:center;
  font-family:'Expose','Bespoke Sans',sans-serif;   /* was inheriting body Bespoke Sans — every other statement on the page is Expose */
  left:50%;top:clamp(116px,16vh,176px);translate:-50% 0;width:min(76vw,1120px);
  /* 5.35vw set 'Matched to your skin.' wider than its own container at
     common widths; -.043em was past the -.04 display floor too */
  font-size:clamp(2.3rem,4.6vw,5.4rem);line-height:.98;letter-spacing:-.04em;
}
.shop-story__copy--statement p{margin:0;will-change:transform,opacity,clip-path}.shop-story__copy--statement p:first-child{color:var(--champagne)}
.shop-story__copy--statement strong{font-weight:500}
.shop-story__copy--product{left:clamp(24px,7.3vw,132px);bottom:clamp(74px,10vh,116px);max-width:25rem}
.shop-story__copy--product>*{will-change:transform,opacity}
.shop-story__index{display:block;margin-bottom:16px;color:var(--sage-label);letter-spacing:.08em;text-transform:uppercase}
.shop-story__copy--product h2,.shop-story__copy--product h3{font-size:clamp(2.25rem,4vw,4.5rem);line-height:.94;letter-spacing:-.04em}
.shop-story__copy--product p{margin:16px 0 22px;color:var(--ivory-dim)}
.shop-story__object{
  position:absolute;z-index:3;left:50%;top:32%;width:clamp(260px,28vw,420px);aspect-ratio:1;
  transform:translate3d(calc(-50% + var(--product-x,0) * 1vw),calc(var(--product-y,7) * 1vh),0)
            rotate(var(--product-rotate,0deg)) scale(var(--product-scale,.88));
  transform-origin:50% 60%;will-change:transform;
}
.shop-story__product{
  width:100%;height:100%;object-fit:contain;display:block;filter:contrast(1.025);
  /* The opaque core ran to 76% of the ellipse — wider than the jar — so a
     ring of the shot's white backdrop stayed at full strength around the
     product before the fade even began. That ring is the halo. Start the
     fade close to the jar's own edge and finish it sooner. */
  -webkit-mask-image:radial-gradient(ellipse 52% 54% at 50% 49%,#000 58%,transparent 90%);
  mask-image:radial-gradient(ellipse 52% 54% at 50% 49%,#000 58%,transparent 90%);
}
.shop-story__hand{
  position:absolute;z-index:2;left:50%;bottom:-22%;width:min(1080px,83vw);height:auto;
  transform:translate3d(calc(-54% + var(--hand-x,0) * 1vw),calc(var(--hand-y,0) * 1vh),0)
            rotate(var(--hand-rotate,0deg)) scale(var(--hand-scale,1));
  transform-origin:52% 84%;opacity:var(--hand-opacity,1);will-change:transform,opacity;
  pointer-events:none;
}
.shop-story__progress{position:absolute;z-index:5;right:clamp(20px,2.5vw,42px);top:50%;width:1px;height:104px;background:var(--hairline-2)}
.shop-story__progress span{display:block;width:100%;height:100%;background:var(--sage-fill);transform:scaleY(var(--story-progress));transform-origin:top}
.shop-story__cue{position:absolute;z-index:5;right:clamp(42px,4vw,68px);bottom:30px;color:var(--sage-label);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}

@media (max-width:760px){
  .shop-story{height:400svh}
  .shop-story__stage{min-height:560px}
  .shop-story__copy--opening{top:108px;max-width:calc(100% - 48px)}
  .shop-story__copy--opening .shop-story__title{font-size:clamp(3rem,15vw,5.25rem)}
  /* 2 / 2 / 2. On one line the second line ran under the jar, which sits at
     left:67% here — three short lines clear it. Desktop keeps its own wrap. */
  .shop-story__note{max-width:19em}
  .shop-story__note .nb{display:inline}
  .shop-story__aside{left:24px;right:auto;top:66%;bottom:auto;max-width:8.8rem;text-align:left;font-size:.94rem}
  .shop-story__copy--statement{top:18%;width:calc(100% - 48px);font-size:clamp(2.55rem,11.5vw,4.6rem)}
  .shop-story__copy--product{bottom:19%;max-width:46vw}
  .shop-story__copy--product h2,.shop-story__copy--product h3{font-size:clamp(1.9rem,9vw,2.35rem)}
  .shop-story__copy--product h2 span,.shop-story__copy--product h3 span{display:block}
  .shop-story__object{left:67%;top:48%;width:clamp(200px,48vw,280px)}   /* 42% put the jar 46px into the note at 750 */
  .shop-story__hand{bottom:-5%;width:142vw;max-width:none;transform:translate3d(calc(-59% + var(--hand-x,0) * 1vw),calc(var(--hand-y,0) * 1vh),0) rotate(var(--hand-rotate,0deg)) scale(var(--hand-scale,1))}
  .shop-story__word{font-size:35vw;bottom:2%}
  .shop-story__progress,.shop-story__cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .shop-story{height:auto}
  .shop-story__stage{position:relative;height:auto;min-height:760px;overflow:hidden}
  .shop-story__copy--opening{position:relative;left:auto;top:auto;padding:130px 24px 0;max-width:700px}
  .shop-story__copy--statement,.shop-story__copy--product{display:none}
  .shop-story__aside{right:24px;top:48%;opacity:1!important;transform:none!important}
  .shop-story__object{top:39%;--product-y:0;--product-scale:.84}
  .shop-story__hand{--hand-x:0;--hand-y:0;--hand-rotate:0deg;--hand-opacity:1;--hand-scale:1}
  .shop-story__cue,.shop-story__progress{display:none}
}

/* ---------- homepage embedding ----------
   The story lives inside the .hm chapter wrapper on index.html, whose
   blanket `.hm img { width:100%; height:100%; object-fit:cover }`
   would crush the composition — restore the story's own geometry. */
.hm .shop-story__product{width:100%;height:100%;object-fit:contain}
.hm .shop-story__hand{width:min(1080px,83vw);height:auto;object-fit:contain}
@media (max-width:760px){
  .hm .shop-story__hand{width:142vw;max-width:none}
}