/* the lineup page */
.lu-page{background:var(--night)}

.lu{padding:clamp(110px,16vh,170px) var(--pad) 40px;max-width:1680px;margin:0 auto}
.lu__head{max-width:820px;position:relative;z-index:6}
.lu__kicker{color:var(--dim)}
.lu__title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(4rem,12vw,10.5rem);line-height:.9;letter-spacing:-.02em;margin:.12em 0 .18em}
.lu__lede{color:var(--dim);font-size:clamp(1rem,1.4vw,1.15rem);max-width:36ch}

.lu__bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:calc(clamp(34px,6vh,64px) - 64px) 0 22px;padding:74px 0 12px;background:linear-gradient(var(--night) 82%,rgba(11,12,16,0))}
.lu__chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:0 var(--pad)}
.lu__chips::-webkit-scrollbar{display:none}
.lu__chip{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.lu__chip span{opacity:.62;margin-left:.2em}
.lu__chip[aria-pressed=true] span{opacity:.75}
.lu__chip:hover{border-color:var(--ink)}
.lu__chip[aria-pressed=true]{background:var(--ink);color:var(--black);border-color:var(--ink)}
.lu__count{color:var(--dim)}

.lu__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,26px) clamp(12px,1.4vw,22px)}
@media (max-width:1099px){.lu__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){.lu__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lu__card[hidden]{display:none}
.lu__link{display:block;text-decoration:none}
.lu__media{position:relative;display:block;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--g) 24%,#303136);isolation:isolate}
.lu__media::after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:inherit;pointer-events:none}
.lu__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease),transform .9s var(--ease)}
.lu__img--front{opacity:0}
.lu__media--set>.lu__img{inset:0 22% 0 -4%;width:82%}
.lu__pants{position:absolute;right:-6%;bottom:-2%;width:52%;aspect-ratio:3/4;z-index:1;transition:transform .9s var(--ease)}
.lu__pants .lu__img{inset:0}
.lu__no{position:absolute;left:10px;top:10px;z-index:2;padding:4px 8px;border-radius:999px;background:rgba(11,12,16,.55);backdrop-filter:blur(6px);color:var(--ink)}
.lu__try{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;padding:10px 12px;border-radius:999px;background:var(--ink);color:var(--black);text-align:center;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease)}
.lu__meta{display:grid;gap:3px;padding:12px 2px 0}
.lu__type{color:var(--dim)}
.lu__name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.05}
.lu__cap{color:var(--red-text);font-size:.68rem}
.lu__price{margin-top:4px}
.lu__price small{color:var(--dim);font-size:.8rem;font-weight:600}

@media (hover:hover){
  .lu__link:hover .lu__img--front{opacity:1}
  .lu__link:hover .lu__img--back{opacity:0}
  .lu__link:hover .lu__img{transform:scale(1.03)}
  .lu__link:hover .lu__pants{transform:translate(-4%,-3%)}
  .lu__link:hover .lu__try,.lu__link:focus-visible .lu__try{opacity:1;transform:none}
}
.lu__link:focus-visible{outline-offset:4px;border-radius:6px}

/* reveal: each card rises in, staggered */
.lu__grid.in .lu__card{animation:luIn .7s var(--ease) both;animation-delay:calc(var(--i)*55ms)}
@keyframes luIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.lu__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:clamp(50px,9vh,100px);padding-top:26px;border-top:1px solid var(--line)}
.lu__foot-line{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.2rem,2vw,1.6rem);max-width:30ch}
.lu__end{padding-top:0}
.lu__end .end__row{margin-top:30px}
.lu__nojs{grid-column:1/-1;color:var(--dim)}

@media (max-width:699px){
  .lu__bar{padding-top:66px;margin-top:-30px}
  .lu__count{display:none}
  .lu__name{font-size:1.2rem}
  .lu__try{display:none}
  .lu__foot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .lu__grid.in .lu__card{animation:none}
  .lu__img,.lu__pants,.lu__try{transition:none}
}