/* Mass & Grass — hoodies & sweatshirts: pieces on a line that grow as they pass the middle (see .claude/skills/hanging-display) */

.wr{--acc:var(--sage);position:relative;isolation:isolate;padding-top:clamp(24px,4vw,48px);overflow:hidden}
/* the chosen piece's colour glows behind the line */
.wr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 30%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 72%);
  transition:background 1s ease}
.wr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.wr-head h1{font-size:var(--fs-h1);margin-top:8px}
.wr-lead{margin:10px 0 0;color:var(--ink-2);max-width:52ch}
.wr-count{font-weight:300;color:var(--ink-3);font-size:.85rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.wr-count b{font-weight:400;color:var(--ink)}

/* ---------- the line ---------- */
.line-stage{position:relative;margin-top:clamp(70px,7.5vw,100px)}
.ghost{position:absolute;z-index:0;inset-inline:var(--gutter);top:-2.1em;text-align:center;pointer-events:none;user-select:none;
  white-space:nowrap;overflow:visible;padding-block:.15em;
  font-family:var(--f-disp);font-weight:300;line-height:1.5;font-size:clamp(1.05rem,1.6vw,1.4rem);
  color:var(--ink-2);transition:opacity .45s ease,translate .55s ease}
.ghost.sw{opacity:0;translate:0 8px}

/* the pieces are placed by hoodies.js: size, place and dimming follow the distance from the middle */
.line{position:relative;z-index:2;height:clamp(360px,45vw,590px);overflow:hidden;outline:none;cursor:grab;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.line.dragging{cursor:grabbing}
.hang{position:absolute;left:0;top:30px;width:120px;border:0;background:none;padding:0;cursor:pointer;transform-origin:50% 0;will-change:transform,opacity}
.hang > *{animation:sway var(--sw,5.6s) ease-in-out var(--swd,0s) infinite alternate;transform-origin:50% 0}
.hang.on{cursor:zoom-in}
.hang:focus-visible{outline:1.5px solid var(--ink);outline-offset:6px}
@keyframes sway{from{rotate:-.9deg}to{rotate:.9deg}}
.motion-paused .hang > *{animation-play-state:paused}
.pc{position:relative;z-index:1;display:block}
/* the photos have different shapes: a tote is tall, a cap is short; keep them the same visual height as a hoodie */
.hang.t-tote .pc{width:80%;margin-inline:auto}
.hang.t-cap .pc{width:86%;margin-inline:auto;margin-top:15%}
.kinds{display:flex;gap:6px 24px;flex-wrap:wrap;margin-top:18px}
.kinds button{padding:6px 0 8px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--ink-3);font:inherit;font-size:.95rem;cursor:pointer;
  transition:color .2s,border-color .2s}
.kinds button:hover{color:var(--ink)}
.kinds button[aria-selected="true"]{color:var(--ink);border-color:var(--ink)}
.pc img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none;
  filter:drop-shadow(0 24px 30px rgba(60,36,16,.22))}
/* the painting paints itself onto the chosen piece */
.paint{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s}
.paint.on{opacity:1}

/* ---------- details under the line ---------- */
.meta{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.55fr);gap:clamp(18px,3vw,48px);
  align-items:center;padding-block:clamp(18px,3vw,36px) clamp(40px,5vw,70px)}

/* the model photo card */
.look-card{margin:0;display:grid;gap:12px;justify-items:center}
.look{position:relative;width:100%;max-width:440px;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);
  border:clamp(8px,1vw,12px) solid var(--sheet);box-shadow:var(--lift);cursor:zoom-in;touch-action:manipulation}
.lk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.lk.on{opacity:1}

.info{display:grid;gap:14px;align-content:center}
.kick{font-size:.8rem;color:var(--ink-3);letter-spacing:.02em}
body.lang-en .kick{letter-spacing:.2em;text-transform:uppercase;font-size:.7rem}
.info h2{font-size:var(--fs-h2);font-weight:300}
.story{margin:0;color:var(--ink-2);max-width:42ch}
.opt{display:grid;gap:8px}
.opt-l{font-size:.84rem;color:var(--ink-3)}
.opt-l b{color:var(--ink)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line-2);background:var(--c);cursor:pointer;padding:0;
  transition:transform .25s var(--ease-pop),box-shadow .2s}
.sw:hover{transform:scale(1.1)}
.sw[aria-checked="true"]{box-shadow:0 0 0 1.5px var(--ink)}
.arts{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:4px 2px 8px;max-width:100%}
.arts{padding:6px 4px 10px}
.art-b{flex:0 0 auto;width:46px;height:46px;padding:3px;border-radius:1px;border:0;background:var(--sheet);cursor:pointer;
  box-shadow:var(--lift);outline:1px solid transparent;outline-offset:3px;transition:transform .25s var(--ease-out),outline-color .2s}
.art-b img{width:100%;height:100%;object-fit:cover;display:block}
.art-b:hover{transform:translateY(-2px)}
.art-b[aria-checked="true"]{outline-color:var(--ink)}
.digital{margin:0;font-size:.9rem;color:var(--ink-2)}
.digital b{color:var(--ink)}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.nav-arrows{display:flex;align-items:center;gap:8px;margin-top:6px}
.arrow{width:44px;height:44px;border-radius:var(--radius);border:1px solid var(--line-2);background:transparent;cursor:pointer;display:grid;place-items:center;font-size:1.05rem;transition:border-color .2s}
.arrow:hover{border-color:var(--ink)}
body.lang-en .arrow span[aria-hidden]{display:inline-block;transform:scaleX(-1)}
.timer{flex:1;max-width:140px;height:1px;background:var(--line);overflow:hidden;margin-inline-start:8px}
.timer i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:right;transform:scaleX(0)}
body.lang-en .timer i{transform-origin:left}
.timer i.run{animation:timer var(--dur,6s) linear forwards}
@keyframes timer{to{transform:scaleX(1)}}

/* the original painting, on paper */
.print-card{position:relative;justify-self:center;display:grid;gap:10px;border:0;background:none;padding:0;cursor:pointer;width:min(100%,220px);transform:rotate(3deg);transition:transform .5s var(--ease-pop)}
.print-card:hover{transform:rotate(0) translateY(-6px)}
.pc-paper{position:relative;display:block;background:#FBF7EF;padding:12px 12px 26px;box-shadow:var(--shadow)}
.pc-paper::before{content:"";position:absolute;inset:-5px;z-index:-1;background:#FBF7EF;filter:url(#deckle)}
.pc-paper canvas{display:block;width:100%;height:auto;aspect-ratio:1;transition:opacity .25s}
.print-card.lifted .pc-paper canvas{opacity:0}
.pc-cap{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--ink-2)}
.pc-cap i{font-style:normal;color:var(--ink-3)}
.fly-sheet{position:fixed;z-index:200;pointer-events:none;transform-origin:0 0;background:#FBF7EF;border-radius:2px}
.fly-sheet canvas{display:block;width:100%;height:100%}

/* ---------- lens ---------- */
.lens{position:absolute;left:0;top:0;z-index:6;width:160px;height:160px;border-radius:50%;overflow:hidden;pointer-events:none;
  border:4px solid #FBF7EF;box-shadow:0 18px 40px -14px rgba(40,25,12,.55),inset 0 0 0 1px rgba(51,37,27,.15);
  opacity:0;scale:.6;transition:opacity .25s,scale .3s var(--ease-pop)}
.lens.on{opacity:1;scale:1}
.lens canvas{width:100%;height:100%;display:block}
.lens-tag{position:absolute;bottom:12px;left:50%;translate:-50% 0;padding:2px 9px;border-radius:2px;font-size:.66rem;font-weight:700;white-space:nowrap;
  background:rgba(51,37,27,.72);color:#FBF7EF}
.lens .t-art{display:none}.lens.art .t-art{display:inline}.lens.art .t-fab{display:none}

/* ---------- collection cards: the piece, then the painting on it ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:clamp(28px,3vw,40px) clamp(16px,2.6vw,30px)}
.card{--acc:var(--sage);position:relative;display:grid;gap:12px;border:0;background:none;cursor:pointer;padding:0;text-align:start;color:inherit}
.card:focus-visible{outline:1.5px solid var(--ink);outline-offset:6px}
.card-media{position:relative;aspect-ratio:4/5}
.card-media img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s,transform .9s var(--ease-out)}
.card-media .art{object-fit:cover;padding:10%;background:var(--sheet) content-box;filter:drop-shadow(0 1px 1px rgba(60,45,30,.08)) drop-shadow(0 10px 14px rgba(60,45,30,.18))}
.card-media .pc{object-fit:contain}
.card-media .pc:not([src]){opacity:0}
/* the piece is shown first (phones have no hover); pointing at it shows the painting on its own */
.card-media:has(.pc[src]) .art{opacity:0;transform:scale(.94)}
.card:hover .card-media .art,.card:focus-visible .card-media .art{opacity:1;transform:none}
.card:hover .pc[src],.card:focus-visible .pc[src]{opacity:0;transform:translateY(6px)}
.card-body{display:grid;gap:0}
.card-body span{font-size:.8rem;color:var(--ink-3)}
.card-body b{font-family:var(--f-disp);font-size:1.05rem;font-weight:400;line-height:1.35}

/* ---------- lightbox ---------- */
.lb{border:0;padding:0;max-width:min(1100px,calc(100% - 32px));width:100%;background:transparent;color:var(--ink);overflow:visible}
.lb::backdrop{background:rgba(46,41,37,.45)}
.lb[open]{animation:lbIn .45s var(--ease-out)}
@keyframes lbIn{from{opacity:0;transform:translateY(20px) scale(.97)}}
.lb-in{position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(18px,3vw,36px);background:var(--paper) var(--paper-img) 0 0/900px repeat;border-radius:var(--radius);padding:clamp(18px,3vw,32px);max-height:calc(100vh - 32px);overflow:auto;box-shadow:var(--lift-hi)}
.lb-x{position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:40px;height:40px;border:0;background:none;cursor:pointer;font-size:1.1rem;color:var(--ink-2)}
.lb-x:hover{color:var(--ink)}
.lb-panes{display:grid;grid-template-columns:.8fr 1fr;gap:14px;align-items:center}
.lb-pane{margin:0;position:relative;display:grid;gap:10px;justify-items:center}
.lb-pane .tag{font-size:.78rem;color:var(--ink-3)}
.lb-paper{display:block;width:100%;background:#FBF7EF;padding:12px;box-shadow:var(--shadow-soft);transform:rotate(-1.5deg)}
.lb-paper img{width:100%;height:auto}
.lb-main{display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);box-shadow:var(--lift)}
.lb-main img{width:100%;height:100%;object-fit:cover}
.lb-body h3{font-size:var(--fs-h3);font-weight:400}
.lb-body p{margin:0;color:var(--ink-2)}
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;padding:12px 0;border-block:1px solid var(--line);font-size:.9rem}
.specs dt{color:var(--ink-3)}.specs dd{margin:0}
.lb-body .note{font-size:.78rem;color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .meta{grid-template-columns:1fr 1fr}
  .look-card{grid-column:1 / -1}
  .look{max-width:420px}
  .print-card{order:3;width:min(70%,190px)}
}
@media (max-width:640px){
  .meta{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr;gap:26px 14px}
  .print-card{order:0}
  .lb-in,.lb-panes{grid-template-columns:1fr}
  .lens{width:130px;height:130px}
}
@media (prefers-reduced-motion:reduce){.hang{animation:none}}