/* scrolly.css - the scroll stage. Colours: cream paper, blush, plum ink, soft gold. */
.scrolly{position:relative;height:var(--run,560vh);background:radial-gradient(120% 80% at 50% 42%,#fffdf9 0%,#f6e7e0 58%,#efd9d0 100%)}
.scrolly .stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.scrolly .gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.scrolly.is-live .gl{opacity:1}
.scrolly .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease}
.scrolly.is-live .still{opacity:0;pointer-events:none}   /* the still shows until the scene is live (it loads lazily) */
.scrolly .stage::after{content:"";position:absolute;left:50%;top:46%;width:34px;height:34px;margin:-17px;border-radius:50%;border:2px solid rgba(94,47,58,.15);
  border-top-color:#5e2f3a;animation:bcspin 1s linear infinite;transition:opacity .4s}   /* loading ring until the scene is live */
.scrolly.is-live .stage::after,.scrolly.is-still .stage::after{opacity:0;animation:none}
@keyframes bcspin{to{transform:rotate(360deg)}}
.scrolly .glow{position:absolute;left:50%;top:46%;width:70vmin;height:70vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 65%);pointer-events:none}
.scrolly .cap{position:absolute;left:0;right:0;bottom:9vh;padding:0 16px;text-align:center;opacity:0;transform:translateY(14px);
  transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.scrolly .cap.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .45s ease .16s,transform .45s ease .16s}   /* the old line leaves before the new one arrives */
.scrolly .cap .eyebrow{display:block;margin-bottom:6px}
.scrolly .cap h2{margin:0 auto;max-width:18ch;font-size:clamp(26px,4.4vw,48px);line-height:1.08}
.scrolly .cap p{margin:10px auto 0;max-width:40ch;color:#7d6e6a}
.scrolly .cap h2{color:#34282a;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic}
.scrolly .cap .eyebrow{color:#b8925e;font:500 12px/1.4 Jost,'Avenir Next',sans-serif;letter-spacing:.22em;text-transform:uppercase}
.scrolly .cap.top{top:12vh;bottom:auto}
.scrolly .bar{position:absolute;left:0;top:0;height:2px;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,#b5727a,#5e2f3a)}
.scrolly .hint{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7d6e6a;
  opacity:calc(1 - var(--p,0)*25)}
/* still mode (reduced motion, low-end, no WebGL): the finished piece, the steps as a short list */
.scrolly.is-still{height:auto}
.scrolly.is-still .stage{position:relative;height:auto;min-height:70vh}
.scrolly.is-still .still{position:relative;height:70vh}
.scrolly.is-still .cap{position:relative;opacity:1;transform:none;bottom:auto;top:auto;padding:14px 16px}
.scrolly.is-still .cap:not(.final){display:none}
.scrolly.is-still .hint,.scrolly.is-still .bar{display:none}
@media (max-width:760px){.scrolly .cap{bottom:7vh}.scrolly .cap.top{top:9vh}}
/* the new drop: four pieces, links to their pages, no prices */
.drop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:540px;margin:14px auto 0}
.scrolly .cap.final{bottom:4vh}
.drop a{display:block;text-decoration:none;color:#34282a;background:#fffdf9;border:1px solid #e8dbd2;border-radius:4px;overflow:hidden}
.drop img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.drop span{display:block;padding:8px 6px 10px;font:italic 500 16px/1.2 'Cormorant Garamond',Georgia,serif}
@media (max-width:760px){.drop{max-width:360px;gap:6px}.drop span{padding:5px 3px 6px;font-size:12px}}