/* ==========================================================================
   BURNER — garment rack: the Store's product presentation (and the
   #/garment-rack-test page). Every selector is .rack-scoped.
   ========================================================================== */

.rack {
  position: relative; overflow: hidden;
  /* empty field above and below the composition (added to the height, so the
     garments keep their size): ~100px phone, ~131 tablet, ~152 at 1024,
     ~185 at 1440, 200 max. Read by rack.js through the paddings. */
  --rack-air: clamp(90px, calc(8vw + 70px), 200px);
  padding: var(--rack-air) 0;
  height: calc(100vh - var(--hdr-h) + 2 * var(--rack-air));
  height: calc(100svh - var(--hdr-h) + 2 * var(--rack-air));
  min-height: 540px;
  background: var(--paper);
  isolation: isolate;           /* garments multiply against this paper only */
  touch-action: pan-y;          /* horizontal swipes turn the rack, vertical still scrolls */
  user-select: none; -webkit-user-select: none;
  cursor: grab; outline: none;
  border-bottom: 1px solid var(--line);
}
.rack.is-dragging { cursor: grabbing; }
.rack:focus-visible { box-shadow: inset 0 0 0 2px var(--fg); }

/* a garment: the photo's studio background is multiplied away against the
   paper, so only the piece reads — no frame, no hanger, no pole */
.rack-item {
  position: absolute; left: 50%; top: 0;
  transform-origin: 50% 0;      /* hangs from its (invisible) hook */
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}
.rack-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
  filter: brightness(1.13) contrast(1.1);    /* lift the grey studio backdrop to white */
}
.rack-item .back { opacity: 0; }
/* once rack.js has cut the photos out, garments are opaque, normally
   composited layers: whatever is in front hides what is behind it */
.rack.rack-cut .rack-item { mix-blend-mode: normal; }
.rack.rack-cut .rack-item img { filter: none; }   /* the lift was only for multiply */

.rack-tag, .rack-hint { position: absolute; z-index: 200; margin: 0; pointer-events: none; }
/* tag + hint: anchored near the top edge of the section, above the white space */
.rack-tag { top: clamp(16px, calc(1.5vw + 10px), 32px); left: var(--gut); color: var(--mid); }
.rack-hint { top: clamp(16px, calc(1.5vw + 10px), 32px); right: var(--gut); color: var(--mid); }
.rack-hint-t { display: none; }
@media (hover: none) { .rack-hint-d { display: none; } .rack-hint-t { display: inline; } }

/* caption for the piece at the front */
.rack-cap {
  position: absolute; left: 0; right: 0; bottom: calc(var(--rack-air) + 22px); z-index: 200;
  text-align: center; pointer-events: none;
  padding: 0 var(--gut);
}
.rack-idx { color: var(--mid); margin: 0 0 6px; }
.rack-name { font-size: clamp(34px, 4.4vw, 60px); font-weight: 400; line-height: 1; margin: 0; }
.rack-sub { margin: 6px 0 0; font-size: 13px; color: var(--mid); }
.rack-buy { margin: 8px 0 0; font-size: 13px; display: flex; justify-content: center; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rack-buy .mono { font-size: 13px; }
.rack-dot { color: var(--mid); }
.rack-link { pointer-events: auto; text-decoration: underline; text-underline-offset: 3px; }

/* wide screens: caption in the bottom-left corner so the garments get the
   full height of the stage (set by rack-test.js) */
.rack.is-wide .rack-cap { left: var(--gut); right: auto; bottom: calc(var(--rack-air) + 20px); width: 240px; padding: 0; text-align: left; }
/* measured by rack-test.js right after it moves, so it must not transition
   (the site-wide reduced-motion rule gives every element a tiny transition) */
.rack-cap { transition: none !important; }
.rack.is-wide .rack-buy { justify-content: flex-start; }

/* only the grey metadata line (type — colour) uses the handwritten face (var(--hand), see styles.css) */
.rack-sub { font-family: var(--hand); font-weight: 400; font-synthesis: none; }

/* Store: THE COUNT hangs off the rack — no divider, and it rises into the
   rack's empty bottom field (same clamp as --rack-air) so it sits a short,
   fixed step below the caption. The rack itself is unchanged. */
.rack:has(+ .edition) { border-bottom: 0; }
.rack + .edition { position: relative; margin-top: calc(-1 * clamp(90px, calc(8vw + 70px), 200px)); padding-top: 24px; }