/* ============================================================================
   The week-one sampler: a slowly moving row of the book's six pages.

   Restyled 2026-10 to sit inside the redesign rather than beside it. Three
   things were wrong before: the row was centred while every other band is left
   aligned, the cards kept the old soft look, and at one card per view the
   continuous drift read as a layout accident rather than a decision.

   Now it is a marquee: a row of cards at the band's own width, left aligned
   with the heading above it, drifting slowly with both edges faded. Several
   cards on screen at once is what makes the movement look deliberate.
   ========================================================================= */

.lsample { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* ---- The track -------------------------------------------------------------- */

.slider { margin-top: 2rem; width: 100%; }

.slider__track {
  /* Positioned so the slides measure their `offsetLeft` from the track itself.
     Without this they measure from <body>, and every scroll target the script
     computes is wrong by however far the track sits from the page edge. */
  position: relative;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* No `scroll-behavior: smooth` here. The script passes `behavior` on each
     call, and declaring it in CSS as well runs two animations over one scroll,
     leaving the arrows a beat behind the click. */
  padding: .5rem 0 1rem;

  /* Visible, because it is now the only thing that says this row moves. Thin
     and in the rule colour so it reads as part of the design rather than as
     an operating system artefact. */
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;

  /* Stop a sideways trackpad swipe triggering the browser's back gesture. */
  overscroll-behavior-x: contain;
}
.slider__track::-webkit-scrollbar { height: 7px; }
.slider__track::-webkit-scrollbar-track { background: transparent; }
.slider__track::-webkit-scrollbar-thumb {
  background: var(--rule-strong); border-radius: 99px;
}
.slider__track::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
.slider__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 8px; }

/* While the row drifts, snapping has to be off: a mandatory snap point drags
   every frame back to the nearest card and it judders instead of gliding. The
   mask stops a card being sliced through the middle of a word by the edge of
   the container. */
.slider__track.is-drifting {
  scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 92%, transparent);
}

/* ---- One card ------------------------------------------------------------------ */

.slide {
  position: relative;
  flex: 0 0 min(23rem, 82vw);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-height: 13rem;
  padding: 1.5rem 3.2rem 1.5rem 1.5rem;   /* room at the right for the number */
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}
.slide:hover {
  border-color: var(--rule-strong);
  box-shadow: 0 16px 34px -24px rgba(16,36,61,.4);
  transform: translateY(-3px);
}

.slide__kicker {
  font-size: .64rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-ink);
}
.slide__title {
  margin-top: .4rem;
  font-family: var(--display); font-weight: 600;
  letter-spacing: var(--display-tracking);
  font-size: 1.22rem; line-height: 1.16;
  color: var(--ink);
}
.slide__blurb {
  margin-top: .6rem;
  font-family: var(--serif); font-size: .92rem; line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Set like the number printed in the corner of the real page. */
.slide__n {
  position: absolute; top: 1.1rem; right: 1.2rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  color: var(--ink-faint);
}

@media (max-width: 720px) {
  .slide { flex-basis: min(20rem, 84vw); min-height: 0; padding: 1.3rem 2.8rem 1.3rem 1.3rem; }
  }