/* Dark room: midnight, lit in gold */
.voices{
  position:relative;color:var(--paper);
  background:
    radial-gradient(70% 60% at 80% 0%,rgba(52,75,120,.55) 0%,rgba(52,75,120,0) 70%),
    linear-gradient(180deg,var(--night) 0%,var(--night-ink) 100%);
}
.voices .sec-title{color:var(--paper);}
.voices .sec-sub{color:var(--gold-light);}

.voice-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);}
.voice{text-align:center;}
.voice-photo{position:relative;width:min(100%,220px);aspect-ratio:1;margin:0 auto 26px;border-radius:50%;
  padding:7px;border:1px solid rgba(220,188,126,.55);}
.voice-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#1e1a14;}
.voice-name{font:italic 400 clamp(21px,1.9vw,24px)/1.25 var(--serif);color:var(--paper);}
.voice-role{margin-top:8px;font:300 14.5px/1.5 var(--sans);color:rgba(251,248,240,.72);min-height:3em;}
.voice-talk{margin:20px auto 0;padding-top:18px;max-width:15em;border-top:1px solid rgba(220,188,126,.3);
  font:400 16px/1.45 var(--sans);color:var(--paper);}
.voice-talk span{display:block;margin-bottom:6px;font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);}

@media (max-width:980px){ .voice-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px;} }
/* phones: swipeable row with the next portrait peeking in */
@media (max-width:600px){
  .voice-list{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scrollbar-width:none;}
  .voice-list::-webkit-scrollbar{display:none;}
  .voice{flex:0 0 74%;scroll-snap-align:center;}
  .voice-role{min-height:0;}
}
.voices-hint{display:none;margin-top:18px;text-align:center;font:400 13px/1 var(--sans);letter-spacing:.08em;color:rgba(251,248,240,.55);}
@media (max-width:600px){ .voices-hint{display:block;} }