/* ==========================================================================
   PREVIOUS PROJECTS
   One project per row. Each row is a scroll driver: while it is on screen the
   row sticks and the wheel drives that project's pictures sideways, exactly
   as the previews rail does. When the band runs out, the page moves on to the
   next project. previous.js sets the driver heights.
   ========================================================================== */

.prev {
  padding-top: var(--mast-h);
}

/* --------------------------------------------------------------------------
   The row, and the stage that sticks inside it
   -------------------------------------------------------------------------- */

.prev__row { position: relative; }

.prev__sticky {
  position: sticky;
  top: var(--mast-h);
  height: calc(100vh - var(--mast-h));
  height: calc(100svh - var(--mast-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vh, 3rem) var(--gutter);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}

@media (min-width: 900px) {
  .prev__sticky {
    grid-template-columns: minmax(15rem, 0.8fr) 1.8fr;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   The writing
   -------------------------------------------------------------------------- */

/* the year alone — the running numbers went when the rail dropped its own */
.prev__year {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.prev__title {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 1.1rem;
}

.prev__side p {
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  line-height: 1.55;
  max-width: 34em;
}

.prev__side p + p { margin-top: 0.9em; }

/* --------------------------------------------------------------------------
   The band — a window with a track that the page scroll slides sideways
   -------------------------------------------------------------------------- */

.prev__reel { overflow: hidden; }

.prev__track {
  display: flex;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  will-change: transform;
}

/* each picture keeps its own proportions; a shared height is what makes the
   band read as one strip. A silent looping clip is just another tile. */
.prev__track img,
.prev__track .prev__loop {
  display: block;
  flex: 0 0 auto;
  height: clamp(190px, 38vh, 380px);
  width: auto;
  background: var(--paper-warm);
}

.prev__film { margin: 0; flex: 0 0 auto; }

.prev__film video {
  display: block;
  height: clamp(190px, 38vh, 380px);
  width: auto;
  background: #000;
}

/* --------------------------------------------------------------------------
   Stacked: no sticky, no sideways — the band just scrolls by hand
   -------------------------------------------------------------------------- */

@media (hover: none), (max-width: 899px), (prefers-reduced-motion: reduce) {
  .prev__sticky {
    position: static;
    height: auto;
    padding-block: clamp(2rem, 6vh, 3.5rem);
  }

  .prev__reel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 0.6rem;
  }

  .prev__track { transform: none !important; }
}