/* =================================================================
   SHREE KALAS — THE MAKING STRIP
   A pinned screen whose track moves sideways with the scroll: tall
   9:16 panels (and one wide) like frames on a strip of film, each a
   muted loop with a caption under it. Below 860px the panels stack
   and scroll normally.
   ================================================================= */
.sk-strip{
  position:relative;
  z-index:2;
  background:var(--sk-invert-bg);
  color:var(--sk-invert-ink);
}
.sk-strip-pin{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.25rem, 3vh, 2.5rem);
  /* the fixed lockup sits top-left until the range: keep the head clear of it */
  padding:clamp(7.5rem, 15vh, 9rem) 0 clamp(2rem, 5vh, 3.5rem);
  overflow:hidden;
}
.sk-strip-head{
  padding-inline:var(--sk-page-pad);
  display:flex;align-items:baseline;gap:2rem;flex-wrap:wrap;
}
.sk-strip-head .sk-eyebrow{color:var(--sk-copper-lt)}
.sk-strip-title{
  margin:0;
  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);
}

/* ---- the track ---- */
.sk-strip-track{
  display:flex;
  align-items:flex-start;
  gap:clamp(1rem, 2vw, 2rem);
  padding-inline:var(--sk-page-pad);
  width:max-content;
  will-change:transform;
}
.sk-panel{
  flex:none;
  margin:0;
  display:flex;flex-direction:column;gap:1rem;
  --h:min(62svh, 44rem);
}
.sk-panel-media{
  position:relative;
  height:var(--h);
  overflow:hidden;
  background:#1b1712;
}
.sk-panel--tall .sk-panel-media{aspect-ratio:9/16}
.sk-panel--wide .sk-panel-media{aspect-ratio:16/9}
.sk-panel-media video{
  display:block;width:100%;height:100%;
  object-fit:cover;
}
/* a little dark at the foot so the number reads if it overlaps */
.sk-panel-media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:30%;
  background:linear-gradient(180deg, transparent, rgba(20,17,13,.45));
  pointer-events:none;
}

.sk-panel-cap{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.75rem;
  row-gap:.35rem;
  max-width:min(100%, 22rem);
}
.sk-panel--wide .sk-panel-cap{max-width:34rem}
.sk-panel-num{
  font-family:var(--sk-font-narr);
  font-size:1rem;
  color:var(--sk-copper-lt);
}
.sk-panel-title{
  font-family:var(--sk-font-head);
  font-weight:700;
  font-size:1.125rem;
  line-height:1;
  letter-spacing:-.02em;
}
.sk-panel-cap p{
  grid-column:2;
  margin:0;
  font-family:var(--sk-font-narr);
  font-size:1.0625rem;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--sk-invert-ink);
  opacity:.8;
  text-wrap:pretty;
}

/* ---- phones and reduced motion: a plain vertical run ---- */
@media(max-width:859px){
  .sk-strip-pin{min-height:0;padding:4rem 0 3rem}
  .sk-strip-track{
    flex-direction:column;
    width:auto;
    gap:2.5rem;
    transform:none !important;
  }
  .sk-panel{--h:auto}
  .sk-panel-media{height:auto;width:100%}
  .sk-panel--tall .sk-panel-media{aspect-ratio:4/5}
}
@media(prefers-reduced-motion:reduce){
  .sk-strip-track{transform:none !important;flex-wrap:wrap;width:auto}
}