/* Purveyors page — reworked 7/29. Title, lede + paragraph, then a logo wall with
   NO boxes: "I find all these boxes to be a little like much. It looks like a board
   game to me… I actually like how the logo is floating on the white background."
   The founders portrait came off the page (see the template header). */

/* Page rhythm — title and intro share one editorial column. */
.purv-page.section { padding-top: clamp(30px, 4vw, 52px); padding-bottom: clamp(32px, 5vw, 56px); }

.purv-h { margin: 0 0 clamp(20px, 3vw, 32px); }
.purv-intro { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.6vw, 26px); align-items: start; }
/* No photo yet (the farm shoot is client homework), so the intro is one column of
   text rather than a two-column grid with a hole in it. */
.purv-intro--textonly { max-width: 62ch; }
.purv-lede { margin: 0; font-size: 1.12rem; line-height: 1.75; }
.purv-body { margin: 0; color: var(--ink-2); line-height: 1.8; }

/* Logo wall band. */
.purv-wall-band.section { padding-top: clamp(30px, 4vw, 52px); padding-bottom: clamp(40px, 6vw, 72px); }

/* Logo wall — logos on the page ground, no tile, no border. Consistent optical
   size and one grayscale system so 21 different logos still read as one wall. */
.purv-wall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(22px, 3.4vw, 44px) clamp(18px, 2.6vw, 32px);
  align-items: center;
}
.purv-wall__item {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px;
}
.purv-wall__item a {
  display: flex; align-items: center; justify-content: center;
  /* A 44px-plus target even for a short logo, per the touch-target rule. */
  min-height: 72px; width: 100%;
}
.purv-wall__item img {
  max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.purv-wall__item:hover img,
.purv-wall__item a:focus-visible img { filter: grayscale(0); opacity: 1; }

@media (min-width: 700px) {
  .purv-wall { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ---- Marquee variant (?wall=marquee) — Tim's alternative on the 7/29 call:
   "it scrolls across the page, the list of logos… like a marquee." Shown so the
   client can compare the two, not as the default. ---- */
.purv-marquee { overflow: hidden; width: 100%; }
.purv-marquee__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: max-content;
  animation: purvScroll 44s linear infinite;
}
.purv-marquee:hover .purv-marquee__track { animation-play-state: paused; }
.purv-marquee__track > li { flex: 0 0 auto; display: flex; align-items: center; min-height: 72px; }
.purv-marquee__track img {
  max-height: 54px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.7;
}
.purv-marquee__track a:hover img { filter: grayscale(0); opacity: 1; }
/* The track holds the list twice, so -50% is exactly one full loop. */
@keyframes purvScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .purv-marquee { overflow-x: auto; }
  .purv-marquee__track { animation: none; }
}

/* Lead photograph — the goat farmer (client 7/29 + 8/5). Portrait frame, so it is
   capped rather than full-bleed: at 1600x2399 a full-width render would push the
   purveyor list two screens down. */
.purv-lead { margin: 0 0 clamp(20px, 3vw, 32px); }
.purv-lead img { display: block; width: 100%; max-width: 460px; height: auto; border-radius: var(--r); }
.purv-lead figcaption { margin-top: 8px; color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.02em; }
@media (min-width: 860px) {
  .purv-lead { float: right; width: 40%; max-width: 460px; margin: 0 0 24px clamp(24px, 3vw, 40px); }
}