/* NOKTVRN — the collection index and the piece page.
   Loaded after base.css, which carries the tokens, .display, .label and the
   nav. Nothing here redefines those.                                        */

/* ------------------------------------------------------------------ shell */
.store{ padding-top:calc(var(--sec) * .8); }
.store-wrap{ padding-inline:var(--gut); }

.crumbs{
  font-family:var(--label); font-size:var(--fs-label);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ash-dim);
  padding-block:0 2.5rem;
}
.crumbs a{ color:var(--ash); }
.crumbs a:hover{ color:var(--bone); }
.crumbs i{ font-style:normal; margin-inline:.6rem; }

.store-head{ padding-block-end:clamp(2.5rem,6vh,4.5rem); }
.store-head h1{ font-size:var(--fs-huge); }
.store-head .lede{
  max-width:52ch; color:var(--ash); margin-block-start:1.6rem; font-size:var(--fs-lead);
}

.link{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone);
  border-bottom:1px solid var(--ferrous); padding-bottom:.35rem;
  display:inline-block; transition:color .35s var(--ease);
}
.link:hover{ color:var(--ferrous); }
.link--muted{ color:var(--ash); border-bottom-color:var(--ash-dim); cursor:default; }
.link--muted:hover{ color:var(--ash); }

.btn-solid{
  display:inline-block; width:100%; text-align:center;
  background:var(--paper); color:var(--ink); border:0;
  font-family:var(--label); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; padding:1.15rem 1.5rem; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.btn-solid:hover{ background:var(--ferrous); color:var(--paper); }
.btn-solid[disabled]{ background:var(--ink-3); color:var(--ash-dim); cursor:not-allowed; }

/* ==========================================================================
   THE INDEX — the collection page.
   The bold move: the catalogue is a numbered ledger, not a grid. Each run is
   one typographic row; the piece it names rises behind the type as you move
   down it. Closed runs stay in the list, struck — the archive is the argument.
   ========================================================================== */
.index{ position:relative; }

.index__plate{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity .6s var(--ease);
}
.index__plate.on{ opacity:1; }
.index__plate img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .7s var(--ease), transform 1.4s var(--ease);
}
.index__plate img.on{ opacity:.62; transform:scale(1); }
.index__plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right,
    color-mix(in oklab, var(--ink) 90%, transparent),
    color-mix(in oklab, var(--ink) 46%, transparent) 62%,
    color-mix(in oklab, var(--ink) 74%, transparent));
}

.runs{ list-style:none; border-top:var(--rule); }
.run{ border-bottom:var(--rule); }
.run__link{
  display:grid; align-items:center; gap:1rem 1.5rem;
  grid-template-columns:3.5rem 1fr;
  padding-block:1.6rem;
  transition:padding-inline-start .5s var(--ease);
}
@media (min-width:900px){
  .run__link{
    grid-template-columns:4.5rem minmax(0,1fr) 12rem 14rem 6.5rem;
    padding-block:1.35rem;
  }
  .run:hover .run__link{ padding-inline-start:1.25rem; }
}
.run__no{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.14em;
  color:var(--ash-dim); transition:color .4s var(--ease);
}
.run:hover .run__no{ color:var(--ferrous); }
.run__name{
  font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 700;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1;
  font-size:clamp(1.5rem, 4.2vw, 3rem); color:var(--bone);
  transition:color .4s var(--ease);
}
.run__spec,.run__run,.run__state{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash);
}
@media (min-width:900px){ .run__run,.run__state{ white-space:nowrap; } }
.run__state{ justify-self:end; text-align:end; }
.run__state.open{ color:var(--ferrous); }
.run__state.pending{ color:var(--bone); }

/* a closed run stays in the ledger, ruled through */
.run--closed .run__name{ color:var(--ash-dim); text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:var(--ash-dim); }
.run--closed:hover .run__name{ color:var(--ash); }
.run--closed .run__spec{ color:var(--ash-dim); }

/* Below 900px the row keeps a thumbnail, since there is no hover to reveal
   one, and the whole record stacks beside it: the desktop columns are far too
   narrow here and the material line broke over three lines inside one. */
.run__thumb{ display:none; }
@media (max-width:899px){
  .run__link{
    grid-template-columns:4.5rem 1fr;
    align-items:start; column-gap:1rem; row-gap:.3rem;
  }
  .run__thumb{
    display:block; grid-column:1; grid-row:1 / span 4;
    width:100%; aspect-ratio:3/4; overflow:hidden; background:var(--ink-2);
  }
  .run__thumb img{ width:100%; height:100%; object-fit:cover; }
  .run--closed .run__thumb img{ opacity:.4; }
  .run__no,.run__name,.run__spec,.run__run,.run__state{ grid-column:2; }
  .run__name{ margin-block:.2rem .35rem; }
  .run__state{ justify-self:start; text-align:start; }
  .index__plate{ display:none; }
}

.index__foot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-block:2rem 0;
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-dim);
}
.index__foot b{ color:var(--ferrous); font-weight:400; }

/* ==========================================================================
   THE PIECE
   The bold move: the run number is the page. It is set enormous behind the
   garment, and the size row is a live count of what is left of it.
   ========================================================================== */
.piece-pg{
  display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1fr;
  padding-block-end:var(--sec);
}
/* grid items default to min-width:auto, which lets wide content widen the track */
.piece-pg > *{ min-inline-size:0; }
@media (min-width:960px){
  .piece-pg{ grid-template-columns:1.05fr .95fr; align-items:start; }
  .piece-pg__media{ position:sticky; top:6rem; }
}

.plate{ position:relative; background:var(--ink-2); overflow:hidden; aspect-ratio:3/4; }
/* the run number is stroked, so it needs a guaranteed ground: without this it
   vanishes on a pale plate and shouts on a dark one */
.plate::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 44% at 0% 0%, rgba(0,0,0,.58), transparent 72%);
}
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate__no{
  position:absolute; inset-block-start:-.06em; inset-inline-start:-.03em;
  font-family:var(--display); font-variation-settings:"wdth" 125,"wght" 700;
  font-size:min(38vw, 26rem); line-height:.78; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.5px color-mix(in oklab, var(--bone) 52%, transparent);
  pointer-events:none; user-select:none;
}
.plate--closed img{ filter:grayscale(1) brightness(.62); }

.plate__cap{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-block-start:.9rem;
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-dim);
}

.buy h1{ font-size:var(--fs-h1); }
.buy__spec{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash); margin-block-start:1rem;
}
.buy__price{
  font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.02em;
  margin-block-start:1.4rem; color:var(--bone);
}
.buy__price s{ color:var(--ash-dim); }
.buy__lede{ color:var(--ash); max-width:46ch; margin-block-start:1.4rem; }

/* the run counter — the headline, not a badge */
.counter{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin-block-start:2.2rem; padding-block:1.2rem;
  border-block:var(--rule);
}
.counter__n{
  font-family:var(--display); font-variation-settings:"wdth" 125,"wght" 700;
  font-size:clamp(2.6rem,7vw,4.2rem); line-height:.82; letter-spacing:-.04em;
  color:var(--ferrous);
}
.counter__of{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone); line-height:1.7;
}
.counter__of i{ display:block; font-style:normal; color:var(--ash-dim); }
.counter--closed .counter__n{ color:var(--ash-dim); }

.sizes{ border:0; margin-block-start:2rem; }
.sizes legend{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash); margin-block-end:1rem;
}
.size-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.size{
  position:relative; display:grid; gap:.35rem; justify-items:center;
  min-width:4.5rem; padding:.85rem .9rem;
  border:1px solid var(--ash-dim); cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.size:hover{ border-color:var(--ash); }
.size input{ position:absolute; opacity:0; pointer-events:none; }
.size:has(input:checked){ border-color:var(--bone); background:var(--ink-2); }
.size:has(input:focus-visible){ outline:2px solid var(--ferrous); outline-offset:2px; }
.size__n{ font-family:var(--label); font-size:.78rem; letter-spacing:.12em; color:var(--bone); }
.size__left{
  font-family:var(--label); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash-dim);
}
.size--gone{ cursor:not-allowed; border-color:var(--ink-3); }
.size--gone:hover{ border-color:var(--ink-3); }
.size--gone .size__n{ color:var(--ash-dim); text-decoration:line-through; }
.size--gone .size__left{ color:var(--ash-dim); }

.buy__act{ margin-block-start:2rem; max-width:24rem; }
.buy__note{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-dim); margin-block-start:1rem;
}

.dl{ margin-block-start:3rem; border-top:var(--rule); }
.dl div{
  display:grid; grid-template-columns:1fr; gap:.25rem;
  padding-block:1rem; border-bottom:var(--rule);
}
@media (min-width:560px){ .dl div{ grid-template-columns:10rem 1fr; gap:1.5rem; } }
.dl dt{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-dim);
}
.dl dd{ color:var(--ash); }

.fit{ margin-block-start:2rem; }
.fit p{ color:var(--ash); max-width:46ch; margin-block-start:.7rem; }

/* the other open runs, at the foot of a piece */
.also{ padding-block-start:var(--sec); }
.also__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  flex-wrap:wrap; margin-block-end:2.5rem;
}
.also__head h2{ font-size:var(--fs-h2); }
.also__grid{
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fill, minmax(min(17rem,100%), 1fr));
}
.also__card figure{ aspect-ratio:3/4; overflow:hidden; background:var(--ink-2); }
.also__card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), opacity .5s var(--ease);
}
.also__card:hover img{ transform:scale(1.04); }
.also__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin-block-start:.9rem;
}
.also__name{
  font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 700;
  text-transform:uppercase; letter-spacing:-.01em; font-size:1.05rem; color:var(--bone);
}
.also__price{ font-family:var(--label); font-size:var(--fs-label); color:var(--ash); }
.also__spec{
  font-family:var(--label); font-size:var(--fs-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash-dim); margin-block-start:.4rem;
}

@media (prefers-reduced-motion:reduce){
  .index__plate,.index__plate img,.run__link,.also__card img{ transition:none; }
}