/* Round 4 (Ale 11-05): bigger, moving first picture + her new photos, each with versions to pick between.
   Versions switch with quiet arrows at the section's sides. */

/* ---------- which version shows ---------- */
.st-hands,.st-wheel,.steam,.flip3,.wall,.shed-band{display:none}
html[data-hero=hands] .st-hands{display:block}
html[data-hero=wheel] .st-wheel{display:block}
html[data-hero=table] .steam{display:block}
html:not([data-hero=table]) #plate,html:not([data-hero=table]) .tags{display:none}
html[data-shop=flip] .rack,html[data-shop=wall] .rack{display:none}
html[data-shop=flip] .flip3{display:grid}
html[data-shop=wall] .wall{display:grid}
html[data-shed=band] .shed-band{display:block}
html[data-shed=band] .note.door{display:none}
html[data-shed=cord] .note.poster:has(img[src*=cottage]){display:none}

/* ---------- first picture: shared stage ---------- */
.scene{overflow:hidden}
.st-hands,.st-wheel{position:absolute;inset:0;overflow:hidden}
html[data-hero=table] #plate{bottom:auto;top:var(--plate-t,0);animation:plate-in 2s var(--ease) both;-webkit-mask-image:linear-gradient(180deg,transparent 26%,#000 42%);mask-image:linear-gradient(180deg,transparent 26%,#000 42%);mask-composite:add;-webkit-mask-composite:source-over}
@keyframes plate-in{from{opacity:0}to{opacity:1}}
#plate{transform-origin:50% 45%}

/* the table: steam off both cups, the morning moving across it */
.steam{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.steam::after{content:"";position:absolute;inset:-20% -30%;background:linear-gradient(105deg,transparent 40%,rgba(255,240,205,.34) 50%,transparent 60%);animation:sunsweep 14s ease-in-out infinite alternate;mix-blend-mode:soft-light}
@keyframes sunsweep{from{transform:translateX(-18%)}to{transform:translateX(18%)}}
.steam i{position:absolute;width:var(--s,180px);height:calc(var(--s,180px)*1.5);margin:calc(var(--s,180px)*-1.3) 0 0 calc(var(--s,180px)*-.5);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,0));filter:blur(14px);opacity:0;animation:rise var(--t,7s) ease-out var(--dl,0s) infinite}
@keyframes rise{0%{opacity:0;transform:translate(0,30px) scale(.55)}18%{opacity:.85}70%{opacity:.28}100%{opacity:0;transform:translate(var(--dx,24px),-180px) scale(1.5) rotate(10deg)}}

/* hands up: real hands raising real bags, from the bottom edge of the first screen */
.hd{position:absolute;bottom:-34px;left:0;width:var(--w);height:var(--ht);margin-left:calc(var(--w)*-.5);transform-origin:50% 100%;transform:translate3d(0,var(--py,0),0);will-change:transform}
.hd .up{display:block;width:100%;height:100%;transform:translateY(46%);opacity:0;transition:transform 1.5s cubic-bezier(.2,1.25,.35,1) var(--dl,0s),opacity .5s linear var(--dl,0s)}
.st-hands.in .hd .up{transform:none;opacity:1}
.hd .sw{display:block;width:100%;height:100%;transform-origin:50% 100%;rotate:var(--r,0deg);animation:sway var(--t,8s) ease-in-out var(--dl,0s) infinite alternate;transition:translate .7s var(--ease)}
@keyframes sway{from{transform:rotate(-1.3deg)}to{transform:rotate(1.5deg) translateY(-7px)}}
.hd img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 22px 26px rgba(39,35,31,.3))}
.hd:hover .sw{translate:0 -16px}

/* the wheel: her photographs turning like the rays on the logo */
.wheel{position:absolute;left:50%;top:var(--wy,900px);width:0;height:0;transform:rotate(var(--a,0deg));will-change:transform;cursor:grab}
.wheel.drag{cursor:grabbing}
.wh{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);margin:calc(var(--ch)*-.5) 0 0 calc(var(--cw)*-.5);transform:rotate(var(--t)) translateY(calc(var(--R)*-1));border-radius:18px;overflow:hidden;background:#e6d9c3;box-shadow:0 26px 44px -22px rgba(39,35,31,.55);pointer-events:auto}
.wh{background:#e6d9c3}
.wh img{display:block;width:100%;height:100%;object-fit:cover;color:transparent;pointer-events:none;-webkit-user-drag:none}
.st-wheel{pointer-events:none}
.st-wheel .wheel{pointer-events:auto;touch-action:pan-y}

/* phones: the picture sits under the copy, in the flow of the page */
@media (max-width:760px),(max-height:520px) and (max-width:1100px){
  html:not([data-hero=table]) .scene{aspect-ratio:auto;height:var(--st-h,120vw);-webkit-mask-image:none;mask-image:none;margin-top:18px}
  html[data-hero=table] .scene{-webkit-mask-image:none;mask-image:none}
  html[data-hero=table] #plate{top:auto;bottom:0;left:74%;animation:none}
  html:not([data-hero=table]) .hero{padding-bottom:28px}
  html:not([data-hero=table]) .chips{padding-top:22px}
  .hd img{filter:drop-shadow(0 14px 16px rgba(39,35,31,.28))}
  .hd:hover .sw{translate:none}
  .wh{border-radius:14px}
}

/* ---------- the shelf: three makers, real packs ---------- */
.goods.g3{--h:clamp(200px,20vw,305px);align-items:flex-end}
.goods.g3 li.grp{flex:var(--f,1) 1 0;min-width:0}
.goods.g3 .packs{display:flex;align-items:flex-end;justify-content:center;height:var(--h)}
.goods.g3 .packs img,.goods.g3 li:hover .packs img{height:var(--h);width:auto;max-width:none;margin:0 -1.4%;transform:none;object-fit:contain;filter:drop-shadow(9px 5px 10px rgba(70,44,18,.22));transition:translate .5s var(--ease)}
.goods.g3 .packs img:nth-child(2){height:calc(var(--h)*.95);z-index:1}
.goods.g3 .packs img:nth-child(3){height:calc(var(--h)*.9)}
.goods.g3 .packs.sm img,.goods.g3 li:hover .packs.sm img{height:calc(var(--h)*.72)}
.goods.g3 .packs.xs img,.goods.g3 li:hover .packs.xs img{height:calc(var(--h)*.56)}
.goods.g3 li:hover .packs img:hover{translate:0 -10px}
.goods.g3 .swing{width:min(100%,290px)}
.goods.g3 li.grp .swing{max-width:290px}
@media (max-width:760px){
  .goods.g3{--h:210px;width:max-content}
  .goods.g3 li.grp{flex:none;width:auto;min-width:64vw;scroll-snap-align:center}
  .board{width:auto;min-width:calc(100% + 0px)}
  html[data-shop=shelf] .board{width:1140px}
}

/* ---------- flip through: three tall panels, tap to change bags ---------- */
.flip3{grid-template-columns:repeat(3,1fr);gap:clamp(8px,.8vw,14px);margin:clamp(48px,5vw,84px) calc(var(--side) * -1) 0;padding:0 clamp(8px,.8vw,14px)}
.flp{position:relative;margin:0}
.flp-i{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:16px;background:#e6d9c3}
.flp-i>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.07;color:transparent;transition:opacity 1s var(--ease),scale 7s linear}
.flp-i>img.on{opacity:1;scale:1}
.fl-next{position:absolute;inset:0;z-index:2;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fl-next:focus-visible{outline:2px solid var(--paper);outline-offset:-6px;border-radius:16px}
.fl-c{padding:12px 4px 0;display:grid;grid-template-columns:1fr auto;column-gap:14px}
.fl-c .k{grid-column:1/3;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.fl-c .t{grid-column:1/3;font-family:"LT Superior",serif;font-size:clamp(19px,1.5vw,23px);line-height:1.12;letter-spacing:-.012em;margin-top:5px}
.fl-c .n{grid-column:1;font-size:14.5px;font-weight:600;margin-top:7px}
.fl-c .d{grid-column:1;font-size:14px;line-height:1.4;color:var(--soft);margin-top:1px;text-wrap:pretty;min-height:2.8em}
.fl-c .dots{grid-column:2;grid-row:3;display:flex;gap:6px;margin-top:12px}
.fl-c .dots i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.3px rgba(39,35,31,.3);transition:background .4s,box-shadow .4s}
.fl-c .dots i.on{background:var(--orange);box-shadow:none}
@media (max-width:760px){
  .flip3{display:none;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84vw;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--side);margin-top:30px;scroll-padding:0 var(--side)}
  html[data-shop=flip] .flip3{display:grid}
  .flip3::-webkit-scrollbar{display:none}
  .flp{scroll-snap-align:start}
}

/* ---------- the wall: one big magazine spread of her photographs ---------- */
.wall{grid-template-columns:minmax(0,8fr) minmax(0,6fr);gap:var(--wg);--wg:clamp(14px,1.5vw,24px);max-width:1500px;margin:clamp(48px,5vw,84px) auto 0;align-items:start}
.wl,.wr{display:grid;gap:var(--wg)}
.wl2{display:grid;grid-template-columns:1fr 1fr;gap:var(--wg)}
.wb{grid-column:1/3;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--wg)}
.w{margin:0;will-change:transform}
.w-i{overflow:hidden;border-radius:14px;background:#e6d9c3}
.w img{display:block;width:100%;height:100%;object-fit:cover;color:transparent}
.w figcaption{font-size:14px;line-height:1.35;color:var(--soft);margin-top:9px}
.w figcaption b{font-weight:600;color:var(--ink)}
.w.a .w-i{aspect-ratio:4/3}
.w.b .w-i,.w.c .w-i,.w.d .w-i{aspect-ratio:3/4}
.w.e .w-i{aspect-ratio:4/3}.w.e img{object-position:50% 66%}
.wb .w-i{aspect-ratio:4/5}
@media (max-width:760px){
  .wall{grid-template-columns:1fr 1fr;gap:18px 10px;margin-top:30px}
  .wl,.wr,.wl2,.wb{display:contents}
  .w{transform:none!important}
  .w.a,.w.e{grid-column:1/3}
  .w.a{order:1}.w.c{order:2}.w.d{order:3}.w.b{order:4}.w.f{order:5}.w.e{order:6}
  .w.g,.w.h,.w.i{display:none}
  .w.b .w-i,.w.c .w-i,.w.d .w-i,.w.f .w-i{aspect-ratio:4/5}
  .w figcaption{font-size:13px}
}

/* ---------- the Shed Room: her red door ---------- */
html[data-shed=band] .connect{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto;column-gap:clamp(28px,4vw,72px);align-content:center;align-items:center;padding:clamp(70px,8vw,120px) 0 clamp(30px,3vw,60px) var(--side)}
.shed-band{grid-column:1;grid-row:1/3;margin:0;aspect-ratio:3/4;max-height:min(88vh,860px);width:100%;overflow:hidden;position:relative;border-radius:18px;background:#3a4a68}
.shed-band img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:50% 40%;transform:translate3d(0,var(--band,0),0);color:transparent}
html[data-shed=band] .c-head{grid-column:2;grid-row:1;text-align:left;align-self:end;padding:0 var(--side) 0 0;margin:0;max-width:none}
html[data-shed=band] .c-head h2,html[data-shed=band] .c-head .lede-s{margin-left:0;margin-right:0;text-align:left}
html[data-shed=band] .line-scroll{grid-column:2;grid-row:2;align-self:start;margin-top:clamp(20px,2.4vw,40px);padding-left:0}
html[data-shed=band] .note.poster{display:none}
@media (min-width:761px){html[data-shed=band] .line-scroll{overflow:visible}}
.rope-nail{display:none}
html[data-shed=band] .rope-nail.on{display:block;fill:#b98f52;stroke:rgba(39,35,31,.55);stroke-width:1}
html[data-shed=band] .line{justify-content:flex-start;width:100%}
html[data-shed=band] .line .note{width:calc((100% - 2 * var(--g) - var(--side)) / 3)}
@media (min-width:761px) and (max-width:1240px){
  html[data-shed=band] .connect{padding-right:var(--side);align-items:center}
  .shed-band{grid-row:1}
  html[data-shed=band] .c-head{grid-row:1;align-self:center;padding:0}
  html[data-shed=band] .line-scroll{grid-column:1/-1;grid-row:2;padding:0 0 72px;margin-top:clamp(20px,3vw,36px)}
  html[data-shed=band] .line{--g:clamp(12px,1.6vw,22px);width:100%;min-width:0;max-width:none}
  html[data-shed=band] .line .note{width:calc((100% - 2 * var(--g)) / 3);aspect-ratio:auto}
}
@media (max-width:760px){
  html[data-shed=band] .connect{display:block;padding:56px 0 0}
  .shed-band{width:auto;margin:0 var(--side) 34px;max-height:none;aspect-ratio:4/5}
  html[data-shed=band] .c-head{padding:0 var(--side)}
  html[data-shed=band] .line-scroll{padding-left:var(--side)}
  html[data-shed=band] .line .note{width:232px}
}
.line{--dw:clamp(220px,20vw,320px)}
.note.ph.door{position:relative;width:var(--dw)!important;aspect-ratio:3/4}
.note.ph.door img{position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:cover;object-position:50% 20%}
@media (min-width:1101px){
  html[data-shed=cord] .line .note:not(.door):not(.poster[style]){width:min(268px,calc((100% - 4 * var(--g) - var(--dw)) / 4))}
}
@media (max-width:760px){
  .line{--dw:min(64vw,280px)}
  .note.ph.door img{left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
  html[data-shed=cord] .line{align-items:flex-start}
  html[data-shed=cord] .line .note:not(.ph){align-self:flex-start}
}

/* ---------- the picker: quiet arrows at the side, nothing over the design ---------- */
.mx{position:absolute;inset:0;pointer-events:none;z-index:9}
.mx button{pointer-events:auto;position:absolute;top:var(--my,50%);width:38px;height:56px;margin-top:-28px;display:grid;place-items:center;border:0;border-radius:99px;background:rgba(255,252,245,.42);color:rgba(39,35,31,.5);cursor:pointer;transition:color .3s,background .3s;-webkit-tap-highlight-color:transparent;font:inherit}
.mx .pv{left:8px}.mx .nx{right:8px}
@media (min-width:761px) and (max-width:1180px){.mx button{width:28px}.mx .pv{left:3px}.mx .nx{right:3px}}
.mx svg{width:12px;height:24px}
.mx button:hover,.mx button:focus-visible{color:var(--ink);background:rgba(255,252,245,.92)}
.mx .ct{position:absolute;top:100%;left:50%;translate:-50% 3px;font-size:10px;font-weight:500;letter-spacing:.06em;white-space:nowrap;color:var(--soft)}
.mx .tp{position:absolute;top:50%;translate:0 -50%;padding:6px 10px;border-radius:8px;background:var(--paper);box-shadow:0 8px 20px -10px rgba(39,35,31,.5);color:var(--ink);font-size:12.5px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s}
.mx .pv .tp{left:calc(100% + 6px)}.mx .nx .tp{right:calc(100% + 6px)}
.mx button:hover .tp{opacity:1}
.hero,.shelf,.connect{position:relative}
@media (max-width:760px){
  .mx button{width:30px;height:48px;margin-top:-24px;background:rgba(255,252,245,.62)}
  .mx .pv{left:3px}.mx .nx{right:3px}
  .mx button:hover .tp{opacity:0}
}
.picks{padding:14px var(--side) calc(14px + env(safe-area-inset-bottom));font-size:12.5px;color:var(--soft);text-align:center;background:var(--ground);text-wrap:balance}
.picks b{font-weight:500;color:var(--ink)}
@media (max-width:760px){ .picks{padding-bottom:calc(84px + env(safe-area-inset-bottom))} }

@media (prefers-reduced-motion:reduce){
  .hd .sw,.steam i,.steam::after,html[data-hero=table] #plate{animation:none}
  .hd .up{transition:none;transform:none;opacity:1}
  .flp-i>img{transition:opacity .2s}
}

/* the hero's plate rules are written for ".scene img": the new stages opt out */
.scene .st-hands img,.scene .st-wheel img{position:static;left:auto;bottom:auto;transform:none;max-width:100%;-webkit-mask-image:none;mask-image:none}
.scene .st-hands img{width:100%;height:100%}
.scene .st-wheel img{width:100%;height:100%}

@media (max-width:760px){
  .hero>.mx{--my:470px!important}
  html[data-shed=band] .connect>.mx{--my:calc(56px + 58vw)!important}
  html[data-shed=cord] .connect>.mx{--my:calc(72vw + 130px)!important}
}

/* the counter the hands come up from behind: the same plank as the shelf */
.st-hands::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(20px,2vw,32px);z-index:6;background:url(img/plank.jpg) center/100% 100%;box-shadow:0 -10px 22px -8px rgba(70,44,18,.32)}

/* 11-06 (Eric): buttons out of the hero so the picture leads; the top bar's Call and the phone bar stay */
.copy .ctas{display:none}
/* hands and wheel sit above the leaf shadows so the photos stay clean and bright */
html[data-hero=hands] .scene,html[data-hero=wheel] .scene{z-index:4}
/* hands: no constant rotating, it softens the photos; a small lift, and a lean toward the cursor */
.hd{transform:translate3d(var(--mx,0),0,0);will-change:auto;transition:transform .8s var(--ease)}
.hd .sw{animation:sway var(--t,8s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes sway{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.hd.stand{bottom:clamp(14px,1.6vw,26px);transform:none}
.hd.stand .sw{animation:none;rotate:none}
.hd.stand img{filter:drop-shadow(-4px 10px 12px rgba(39,35,31,.28));object-position:100% 100%}