/* =================================================================
   SHREE KALAS — THE RANGE BAND

   The first paper band: every piece, on the second screen. Editions'
   paper cuts through its dark world in the right 80% column and opens
   with a serif narrative line, not a headline — so does this. The
   plates are capped at the pixels the client's sheets actually hold
   (≤ 380px), which reads sharper than a big soft one.
   ================================================================= */

.sk-range{
  position:relative;
  z-index:30;
  /* full-bleed out of the page */
  width:100vw;
  margin-inline:calc(50% - 50vw);
  padding-block:var(--sk-pad-y);
  background:var(--sk-paper);
  color:var(--sk-ink);
}
.sk-range .sk-ch-col{max-width:var(--sk-maxw);margin-inline:auto;padding-inline:var(--sk-page-pad)}

/* on the home, from the rail breakpoint, the band is the right 80% —
   the world stays visible in the rail column */
@media(min-width:940px){
  .sk-home .sk-range{
    width:calc(100vw - var(--sk-gutter-w));
    margin-left:calc(50% - 50vw + var(--sk-gutter-w));
    margin-right:0;
  }
  .sk-home .sk-range .sk-ch-col{margin-inline:0}
}

/* ---- the head: eyebrow, narrative line, the catalogue link ---- */
.sk-range-head{
  display:grid;
  gap:1.5rem;
  padding-bottom:2.5rem;
  margin-bottom:clamp(2.5rem,4vw,4rem);
  border-bottom:1px solid var(--sk-rule);
}
@media(min-width:900px){
  .sk-range-head{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    column-gap:3rem;
  }
  .sk-range-head .sk-eyebrow{grid-column:1 / -1}
}
.sk-eyebrow{
  display:block;
  font-family:var(--sk-font-head);
  font-weight:700;
  font-size:1.125rem;
  line-height:.95;
  letter-spacing:-.02em;
}
.sk-range-lead{
  margin:0;
  max-width:30ch;
  font-family:var(--sk-font-narr);
  font-weight:400;
  font-size:var(--sk-t-narr);
  line-height:var(--sk-lh-narr);
  letter-spacing:var(--sk-ls-narr);
  text-wrap:pretty;
  color:var(--sk-ink);
}
.sk-range-head .sk-link{color:var(--sk-ink);white-space:nowrap;margin-bottom:.35em}

/* ---- the grid ----
   Two up on a phone, then three, four, five. More columns keeps each
   plate nearer its true size. */
.sk-range-strip{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1rem,1.6vw,1.75rem);
  row-gap:clamp(2.5rem,3.4vw,4rem);
}
@media(min-width:640px){ .sk-range-strip{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1000px){ .sk-range-strip{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(min-width:1500px){ .sk-range-strip{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* ---- one entry ---- */
.sk-range-item{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.sk-range-link{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  color:inherit;
  text-decoration:none;
}
/* the link covers the whole entry; the Enquire button lifts back above it */
.sk-range-link::after{content:"";position:absolute;inset:0}

.sk-range-plate{
  display:grid;
  place-items:center;
  aspect-ratio:4/5;
  width:100%;
  max-width:23.75rem;   /* 380px: the largest plate the sheets support */
  overflow:hidden;
  background:var(--sk-paper-deep);
  border:1px solid transparent;
  transition:border-color .3s var(--sk-ease);
}
.sk-range-plate img{
  width:100%;height:100%;
  object-fit:contain;
  padding:6%;
}
.sk-range-item:hover .sk-range-plate{border-color:var(--sk-rule)}

.sk-range-name{
  font-family:var(--sk-font-head);
  font-weight:700;
  font-size:1rem;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--sk-ink);
  text-wrap:pretty;
}
.sk-range-item:hover .sk-range-name{color:var(--sk-copper-dk)}
.sk-range-spec{
  font-family:var(--sk-font-narr);
  font-size:1.0625rem;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--sk-muted);
  text-wrap:pretty;
}

/* always visible, never hover-only; the one thing here that is not the link */
.sk-range-add{
  position:relative;
  z-index:1;
  align-self:flex-start;
  margin-top:.875rem;
}

@media(max-width:640px){
  .sk-range-spec{display:none}
}