.view-switcher { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.6); font: 500 10px var(--mono); letter-spacing: .02em; }
.view-switcher a { padding: 5px 8px; color: var(--muted); border-radius: 999px; }
.view-switcher a.is-active { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(23,25,37,.08); }
.view-switcher a:hover { color: var(--ink); }

.quotes-section { background: #f4f4fa; }
.quote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.quote-card { position: relative; display: flex; min-height: 282px; flex-direction: column; justify-content: space-between; margin: 0; padding: 23px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.quote-card::after { position: absolute; right: -35px; bottom: -45px; width: 110px; height: 110px; content: ''; border: 1px solid currentColor; border-radius: 50%; opacity: .12; box-shadow: 0 0 0 17px currentColor; }
.quote-card:nth-child(1) { color: var(--purple); }.quote-card:nth-child(2) { color: var(--teal); }.quote-card:nth-child(3) { color: var(--amber); }.quote-card:nth-child(4) { color: var(--purple); }
.quote-card blockquote { position: relative; z-index: 1; margin: 0; color: var(--ink); font: 500 17px/1.45 var(--serif); letter-spacing: -.025em; }
.quote-card blockquote::before { display: block; height: 25px; color: currentColor; content: '“'; font: 50px/.7 var(--serif); }
.quote-card figcaption { position: relative; z-index: 1; margin-top: 23px; color: var(--muted); font: 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 950px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .view-switcher { justify-content: center; margin: 4px 0; }.quote-grid { grid-template-columns: 1fr; }.quote-card { min-height: 235px; } }