/* Praise: a vertical list. The lead quote runs full width and large; the other five fall into two ruled columns. */
.quotes { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(36px, 5vw, 72px); }
.quotes li { break-inside: avoid; }
.quotes__lead { column-span: all; margin-bottom: clamp(36px, 4vw, 64px); }
.quotes__item { padding: 28px 0 clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.q { margin: 0; }
.q blockquote { margin: 0; }
.q p { margin: 0; font-size: clamp(20px, 1.5vw, 23px); line-height: 1.45; font-weight: 400; text-indent: -0.42em; text-wrap: pretty; }
.q figcaption { margin-top: 18px; }
.q__name { font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.q__role { display: block; margin-top: 4px; font-style: italic; font-size: 17px; line-height: 1.4; color: var(--sepia); }

.q--lead { padding-top: 0; }
.q--lead p { font-size: clamp(30px, 3.1vw, 50px); line-height: 1.2; letter-spacing: -0.012em; font-weight: 400; font-variation-settings: "opsz" 48; text-wrap: balance; }
.q--lead figcaption { margin-top: 26px; }
.q--lead .q__name { font-size: 14px; }

@media (max-width: 899px) {
  .quotes { columns: 1; }
}