/* The rack: every graphic tee on one black rail, above the hero. They hang side-on, the way
   clothes really sit on a rail, so all of them fit with nothing to scroll. Hover (or slide a
   finger along the rail) and a tee turns to face you, the ones beside it part, its tag swings
   up and a worn photo peeks out. */
.rack {
  --tee: clamp(240px, 22vw, 330px);   /* a tee's width when it faces you */
  --rail-y: 34px;                      /* the bar's centre, from the top of the stage */
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + clamp(20px, 4vh, 44px)) 0 clamp(26px, 4vh, 44px);
  background: radial-gradient(ellipse 62% 64% at 50% 48%, #141312 0%, #070707 54%, #000 100%);
  color: var(--fg);
}
.rack::after { opacity: .14; z-index: 0; }
.rack > * { position: relative; z-index: 1; }

/* ---------- heading ---------- */
.rack__head { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.rack__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.rack__live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lit); }
.rack__live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lit);
  animation: rack-pulse 1.8s var(--ease-out) infinite;
}
.rack.is-tried .rack__live::after { animation: none; }
@keyframes rack-pulse { to { transform: scale(3); opacity: 0; } }
.rack__title {
  font-family: var(--display); font-weight: 900; font-stretch: 112%;
  font-size: clamp(2rem, 1rem + 3vw, 3.9rem); line-height: .92; letter-spacing: -.04em;
}
.rack__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--lit); }

/* ---------- the stage: rail, brackets, tees ---------- */
.rack__stage { position: relative; margin-top: clamp(14px, 3vh, 30px); touch-action: pan-y; }
.rack__bar {
  position: absolute; left: 0; right: 0; top: calc(var(--rail-y) - 5px); height: 10px; z-index: 30; pointer-events: none;
  /* matte black powder-coat: a thin top highlight keeps it readable on the dark stage */
  background: linear-gradient(180deg, #4a4844 0%, #1c1b1a 22%, #0b0b0a 60%, #000 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.rack__bar::before, .rack__bar::after {
  content: ""; position: absolute; top: -22px; width: 12px; height: 34px; border-radius: 3px;
  background: linear-gradient(90deg, #050505, #2c2b29 45%, #070707);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.rack__bar::before { left: var(--gutter); }
.rack__bar::after { right: var(--gutter); }

/* the row: --slot is set by the script from the rail's width */
.rack__track {
  --slot: 60px;
  display: flex; justify-content: center; list-style: none; margin: 0;
  padding: 6px var(--gutter) 30px;
}

/* ---------- one hanging tee ---------- */
.hang {
  --a: 0deg;        /* swing round the hook, set by the script */
  --side: 0deg;      /* straight on: the design faces you (owner preferred this to side-on, 13 Nov) */
  --shift: 0px;     /* parting to make room for the tee in focus */
  position: relative; flex: 0 0 var(--slot); min-width: 0; z-index: 1;
  translate: var(--shift) 0;
  transition: translate .65s var(--ease-out);
}
.hang.is-right { --side: 0deg; }
.hang.is-focus { z-index: 20; }

/* the hit area is the slot itself, so the pointer always means the tee under it; the tee in
   focus widens to its full face so moving across it doesn't let go */
.hang__link {
  display: block; position: relative; height: 100%; color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent; outline: none;
}
@media (hover: hover) {
  .hang.is-focus .hang__link::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc((var(--slot) - var(--tee)) / 2); width: var(--tee);
  }
}
.hang__link:focus-visible .hang__tee { outline: 2px solid var(--lit); outline-offset: 6px; border-radius: 12px; }

/* everything below the hook swings round the hook; the tee itself is wider than its slot */
.hang__swing {
  display: block; position: relative; pointer-events: none;
  width: var(--tee); margin-left: calc((var(--slot) - var(--tee)) / 2);
  transform: rotate(var(--a)); transform-origin: 50% calc(var(--rail-y) - 6px);
  perspective: 1100px; perspective-origin: 50% 30%;
}
/* the hanger and tee turn together round the hook's axis, from side-on to facing you */
.hang__turn {
  display: block; position: relative; transform-style: preserve-3d;
  transform: rotateY(var(--side));
  transition: transform .75s cubic-bezier(.3, .8, .25, 1);
}
.hang.is-focus .hang__turn { transform: rotateY(0deg); }
.hang__hanger { display: block; width: 78%; margin: 0 auto; height: auto; overflow: visible; position: relative; }

/* the tee, with a back that turns round once it faces you */
.hang__tee {
  display: block; position: relative; margin-top: calc(var(--tee) * -.17); aspect-ratio: 647 / 700;
  transform-style: preserve-3d; transition: transform .8s cubic-bezier(.6, .05, .2, 1);
}
.hang__tee img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  -webkit-user-drag: none; user-select: none;
}
.hang__back { transform: rotateY(180deg); }
.hang.is-turned .hang__tee { transform: rotateY(180deg); }
/* tees with nothing on the back give a slow sway instead, so they still feel like cloth */
@keyframes tee-sway { 0%, 100% { transform: rotateY(0deg); } 30% { transform: rotateY(-14deg); } 70% { transform: rotateY(12deg); } }

/* a soft shadow on the wall behind each tee (a plain blurred shape, not a filter on the photo,
   so the photo stays sharp while it turns) */
.hang__shadow {
  position: absolute; left: 14%; right: 14%; top: 26%; height: 70%; z-index: -1;
  background: rgba(0, 0, 0, .55); border-radius: 40%; filter: blur(22px);
  opacity: 0; transition: opacity .6s var(--ease-out);
}
.hang.is-focus .hang__shadow { opacity: 1; }
/* each tee's pool of light on the wall; the one in focus is lit fully */
.hang::before {
  content: ""; position: absolute; left: 50%; top: 4%; width: calc(var(--tee) * 1.4); height: calc(var(--tee) * 1.2);
  translate: -50% 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 44%, rgba(255, 236, 200, .22), transparent 70%);
  opacity: 0; transition: opacity .8s var(--ease-out);
}
.hang.is-focus::before { opacity: 1; }

/* the swing tag: a yellow card on a thread from the sleeve, numbered like a jersey. It hangs
   BESIDE the piece and BEHIND it (owner, 14 Nov: it must never cover the tee), sliding out from
   behind the sleeve. --edge is where the cut-out's cloth ends (the files leave ~5% clear each
   side); --tuck is how much of the tag stays hidden behind the sleeve. The tees beside it part
   to make room (rack.js works out how far from the tag's real width). */
.hang__swing { --edge: calc(var(--tee) * .95); --peek-tuck: calc(var(--tee) * .09); }
.hang__tag {
  --tuck: 10px;
  position: absolute; z-index: -1; left: calc(var(--edge) - var(--tuck)); top: calc(var(--tee) * .3);
  display: grid; gap: 2px; width: clamp(80px, calc(var(--tee) * .37), 96px); padding: 18px 10px 9px;
  background: var(--lit); color: #000; border-radius: 4px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
  transform-origin: 50% -26px; transform: translateX(-36px) rotate(10deg) scale(.92); opacity: 0;
  transition: transform .7s cubic-bezier(.3, 1.6, .5, 1), opacity .3s;
  box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .8);
}
.hang__tag::before {
  content: ""; position: absolute; top: 6px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: #1a1917; box-shadow: inset 0 0 0 1.5px #c9a227;
}
.hang__tag::after {
  content: ""; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 28px; margin-bottom: -10px;
  background: linear-gradient(#5a5753, #2a2826); transform: rotate(-24deg); transform-origin: bottom;
}
.hang__no { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 1.9rem; line-height: .82; letter-spacing: -.04em; }
.hang__name { font-family: var(--mono); font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; max-width: 15ch; line-height: 1.25; }
.hang__price { font-family: var(--mono); font-size: .625rem; font-weight: 500; white-space: nowrap; }
.hang.is-focus .hang__tag { opacity: 1; transform: translateX(0) rotate(-5deg) scale(1); transition-delay: .2s, .2s; }
/* pieces on the right half of the rail show their tag and photo on their left */
.hang.is-out-left .hang__tag { left: auto; right: calc(var(--edge) - var(--tuck)); transform: translateX(36px) rotate(-10deg) scale(.92); }
.hang.is-out-left.is-focus .hang__tag { transform: translateX(0) rotate(5deg) scale(1); }
.hang.is-out-left .hang__tag::after { transform: rotate(24deg); }

/* the sneak peek: a photo of the piece being worn slides out from behind it, on the side away
   from the tag (so the two never cover each other or the piece) */
.hang__peek {
  position: absolute; z-index: -1; right: calc(var(--edge) - var(--peek-tuck)); top: calc(var(--tee) * .46); width: min(36%, 96px);
  padding: 6px 6px 22px; background: #f2efe9; border-radius: 4px;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .85);
  transform: translate(44px, -8px) rotate(0deg); opacity: 0;
  transition: transform .9s var(--ease-out), opacity .4s;
}
.hang.is-out-left .hang__peek { right: auto; left: calc(var(--edge) - var(--peek-tuck)); transform: translate(-44px, -8px) rotate(0deg); }
.hang__peek img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; filter: saturate(1.15) contrast(1.05); }
.hang__peek span {
  position: absolute; left: 8px; bottom: 5px; font-family: var(--mono); font-size: .5625rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #4b4844;
}
.hang.is-focus .hang__peek { opacity: 1; transform: translate(0, 0) rotate(-6deg); transition-delay: .35s, .35s; }
.hang.is-out-left.is-focus .hang__peek { transform: translate(0, 0) rotate(6deg); }


/* ---------- the caption under the rail ---------- */
.rack__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  max-width: var(--max); margin: clamp(4px, 1.5vh, 14px) auto 0; padding: 0 var(--gutter);
}
.rack__now { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-height: 2.6em; }
.rack__now-no { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.rack__now-name { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em; }
.rack__now-meta { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.rack__now-go { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.rack__now-go:hover { color: var(--lit); }
.rack__hint { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 479px) { .rack__hint { white-space: normal; line-height: 1.6; } } /* was cut off at the edge on phones */
.rack__hint-touch { display: none; }

/* entrance: the tees slide along the rail once, then settle (the script adds .is-in) */
.js .rack:not(.is-in) .hang__swing { opacity: 0; translate: 40vw 0; }
.rack .hang__swing { transition: opacity .6s var(--ease-out) calc(var(--i, 0) * 45ms), translate 1.2s var(--ease-out) calc(var(--i, 0) * 45ms); }
.rack.is-settled .hang__swing { transition: none; }

/* the hero below no longer sits under the header */
.rack + .hero { padding-top: clamp(56px, 9vh, 104px); }

@media (max-width: 899px) {
  .rack { --tee: min(58vw, 250px); }
  .rack__foot { grid-template-columns: 1fr; }
  .hang__tag { padding: 16px 8px 8px; }
  .hang__no { font-size: 1.5rem; }
}
@media (hover: none) {
  .rack__hint-fine { display: none; }
  .rack__hint-touch { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .hang, .hang__turn, .hang__tee, .hang__tag, .hang__peek, .rack .hang__swing { transition: none !important; animation: none !important; }
  .js .rack:not(.is-in) .hang__swing { opacity: 1; translate: none; }
  .rack__live::after { animation: none; }
}

/* hold the rail's height before the tees arrive, so the page below doesn't jump */
.rack__stage { min-height: calc(var(--tee) * 1.38); }

/* phones: about two pieces at a time, swipe along the rail */
@media (max-width: 899px) {
  .rack__stage { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; touch-action: pan-x pan-y; scrollbar-width: none; }
  .rack__stage::-webkit-scrollbar { display: none; }
  .rack__track { justify-content: flex-start; width: max-content; }
  .hang { scroll-snap-align: center; }
  /* the bar runs the whole scrolling row; the script sets --row-w (it was 0 wide on phones,
     because --slot only lives on the row) */
  .rack__bar { width: var(--row-w, 100%); right: auto; }
  .hang__peek { display: none; }
}