/* 05 / In their words. Markup from site/voices.py, motion from voices.js. Monochrome, like the rest of the page. */
.voices{--v-muted:#676c64;padding:10px 0 100px;overflow:hidden}
.voices .section-heading{margin-bottom:46px}

/* card */
.voice{margin:0;display:flex;flex-direction:column;gap:22px;background:var(--white);border:1px solid var(--line);
  border-radius:18px;padding:26px 30px 24px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s,opacity .5s,filter .5s}
.voice-top{display:flex;align-items:center;gap:12px;min-height:22px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--v-muted)}
.voice-metric{margin-left:auto;min-width:0;text-transform:none;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-metric i{font-style:normal}
.voice-metric b{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:-.01em;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-right:6px}
.voice-badge{color:var(--accent);white-space:nowrap}
.voice-metric+.voice-badge{margin-left:0}
.voice-sector+.voice-badge{margin-left:auto}
.voice blockquote{margin:0;flex:1}
.voice blockquote p{margin:0;font-size:17px;line-height:1.6;color:var(--ink);letter-spacing:-.01em}
.voice blockquote p::before{content:"“";display:block;font-family:var(--serif);font-size:54px;line-height:.6;height:22px;color:var(--v-muted)}
.voice blockquote em{font-family:var(--serif);font-style:italic;font-size:1.12em;letter-spacing:-.01em}
.voice figcaption{display:flex;align-items:center;gap:13px}
.voice-mark{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.voice-mark img{width:100%;height:100%;object-fit:cover}
.voice-who{min-width:0;line-height:1.35}
.voice-who b{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.voice-who span{display:block;font-size:14px;color:var(--v-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-link{margin-left:auto;align-self:flex-end;font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--line)}
.voice-link:hover{border-color:var(--ink)}
.voice.unapproved{border-style:dashed}
.voice :focus-visible,.voices-row:focus-visible,.voices-pause:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* grid mode: one lead card, the rest beside it */
.voices-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px}
.voices-grid .voice{min-width:0}
.voices-grid .voice.lead{grid-row:span 2;padding:34px 38px 30px}
.voices-grid .voice.lead blockquote{display:flex;align-items:center}
.voices-grid .voice.lead blockquote p{font-size:clamp(20px,2vw,26px);line-height:1.45;letter-spacing:-.02em}
.voices-grid .voice.lead blockquote p::before{font-size:72px;height:30px}
.voices-grid .voice{transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1),transform .45s,box-shadow .45s,border-color .45s}
.voices.reveal:not(.in) .voices-grid .voice,.voices.reveal:not(.in) .voices-row{opacity:0;translate:0 16px}
.voices-grid .voice:nth-child(2){transition-delay:.08s}
.voices-grid .voice:nth-child(3){transition-delay:.16s}
.voices-grid .voice:nth-child(n+4){transition-delay:.24s}

/* marquee mode */
.voices-rows{display:grid;gap:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.voices-row{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms),translate .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms)}
.voices-row.dragging{cursor:grabbing}
.voices-track{display:flex;gap:18px;width:max-content}
.voices-track .voice{flex:0 0 auto;width:min(440px,78vw);min-height:262px}
@media(hover:hover){
  .voice:hover{transform:translateY(-4px);border-color:#c9cac3;box-shadow:0 22px 40px -28px rgba(23,25,23,.35)}
  /* spotlight: the card you are reading stays lit, its row-mates step back */
  .voices-row:has(.voice:hover) .voice:not(:hover){opacity:.45;filter:grayscale(1)}
}
.voices-row.dragging .voice{opacity:1!important;filter:none!important;transform:none!important}

/* foot */
.voices-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:13px;color:var(--v-muted)}
.voices-pause{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
  background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}
.voices-pause:hover{border-color:var(--ink)}
.voices-cta{margin-left:auto;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.voices-cta span{display:inline-block;transition:transform .3s}
.voices-cta:hover span{transform:translate(2px,-2px)}

@media(max-width:900px){
  .voices{padding:0 0 65px}
  .voice{padding:22px 22px 20px}.voice blockquote p{font-size:16px}
  .voices-grid{grid-template-columns:minmax(0,1fr)}.voices-grid .voice.lead{grid-row:auto;padding:26px 24px 22px}
}
@media(max-width:650px){
  .voices-rows,.voices-track{gap:12px}
  .voices-track .voice{width:82vw;min-height:0}
  .voice-metric i{display:none}
  .voices-cta{margin-left:0}
}

/* still: paused by the visitor, or the OS asks for less motion. Rows become swipeable shelves. */
.voices.still .voices-rows{-webkit-mask-image:none;mask-image:none}
.voices.still .voices-row{overflow-x:auto;scroll-snap-type:x mandatory;cursor:auto;padding:4px 0 8px;scroll-padding-inline:24px}
.voices.still .voices-track{padding-inline:24px}
.voices.still .voice{scroll-snap-align:start}
@media(prefers-reduced-motion:reduce){
  .voices-row,.voices-grid .voice{opacity:1;translate:none;transition:none}
  .voice,.voice:hover{transition:none;transform:none}
}