.voices-section { background: #e2d8cb; overflow: hidden; border-block: 1px solid #c4b6a4; }
.voices-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.voices-heading h2 { margin-top: 20px; }
.voices-heading > div > p:last-child { font-size: 12px; margin-top: 15px; }
.voices-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.voices-controls[hidden] { display: none; }
.voices-controls button {
  width: 48px; height: 48px; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); font: 20px Georgia, serif; cursor: pointer;
}
.voices-controls button:hover { background: #fffdf8; }
.voices-controls button[aria-disabled="true"] { opacity: .35; cursor: default; }
.voices-position { min-width: 66px; text-align: center; font: 11px Georgia, serif; letter-spacing: .05em; }
.voices-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: #9a8058 transparent; padding: 7px 7px 18px;
}
.voice-card {
  position: relative; min-width: 0; padding: 10px; background: #fffdf8;
  border: 1px solid #9a8058; box-shadow: 7px 7px 0 #cabcaa;
  clip-path: polygon(0 18px,18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  scroll-snap-align: start;
}
.voice-card::before {
  content: ""; position: absolute; inset: 17px; pointer-events: none; z-index: 1;
  border-top: 1px solid #b9a488; border-right: 1px solid #b9a488;
}
.voice-image { margin: 0; aspect-ratio: .92; overflow: hidden; background: #e8e5de; }
.voice-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.voice-copy { position: relative; padding: 27px 20px 25px; }
.voice-copy > span { font: 9px Georgia, serif; color: #806848; letter-spacing: .17em; }
.voice-copy h3 { margin: 12px 0 15px; font-size: 21px; }
.voice-copy p { font-size: 12px; line-height: 2; }
.voices-note { margin-top: 19px; font-size: 10px; color: #695f54; }
.voices-track:focus-visible, .voices-controls button:focus-visible { outline: 3px solid #91723e; outline-offset: 4px; }
@media (max-width: 960px) {
  .voices-track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .voices-heading { display: block; margin-bottom: 25px; }
  .voices-heading h2 { font-size: 28px; }
  .voices-controls { justify-content: flex-end; margin-top: 23px; }
  .voices-track { grid-auto-columns: 88%; gap: 16px; padding-inline: 3px; }
  .voice-copy { padding: 23px 16px 22px; }
}
@media print {
  .voices-track { grid-auto-flow: row; grid-template-columns: repeat(3,1fr); overflow: visible; }
  .voices-controls { display: none; }
}