.sl { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(40px, 7vh, 88px) var(--margin) 64px; }
.sl-intro { display: grid; gap: 18px; max-width: 780px; margin-bottom: 32px; }
.sl-lede { font-size: var(--step-lead); line-height: 1.4; color: var(--muted); max-width: 46ch; }
.sl-filter { display: flex; gap: 8px; margin: 0 calc(-1 * var(--margin)) 10px; padding: 4px var(--margin) 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.sl-filter::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .sl-filter { flex-wrap: wrap; overflow: visible; margin: 0 0 10px; padding: 0; } }
.sl-filter button { flex: none; scroll-snap-align: start; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--night-2); color: var(--muted); font-size: 15px; font-weight: 500; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color .2s, color .2s, border-color .2s, transform .16s var(--ease-out); }
.sl-filter button:active { transform: scale(.97); }
.sl-filter button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .sl-filter button:not([aria-pressed="true"]):hover { border-color: var(--honey); color: var(--paper); } }
.sl-count { margin: 6px 0 22px; color: var(--muted); font-size: 15px; min-height: 1.4em; }
.sl-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .sl-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sl-grid { grid-template-columns: repeat(3, 1fr); } }
.sl-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: 24px; background: var(--night-2); border: 1px solid var(--line); }
.sl-card[hidden] { display: none; }
.sl-card.is-in { animation: sl-in .32s var(--ease-out); }
@keyframes sl-in { from { opacity: 0; transform: translateY(6px); } }
.sl-q { font: italic 400 1.25rem/1.3 var(--serif); color: var(--honey); }
.sl-card h2 { font-size: clamp(1.625rem, 1.4rem + .8vw, 2rem); }
.sl-card p:not(.sl-q) { color: var(--muted); font-size: 16px; line-height: 1.55; }
.sl-go { margin-top: auto; padding-top: 8px; align-self: flex-start; font-size: 16px; font-weight: 500; color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(242,240,235,.35); }
.sl-go::after { content: " \2192"; color: var(--honey); }
@media (hover: hover) and (pointer: fine) { .sl-go:hover { text-decoration-color: var(--honey); } }
.sl-end { display: grid; gap: 16px; margin-top: 48px; padding: 30px 26px; border-radius: 28px; background: var(--paper); color: var(--ink); }
.sl-end h2 { color: var(--ink); }
.sl-end p { color: var(--ink-muted); max-width: 56ch; }
.sl-end-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-end .button-light { background: var(--ink); color: var(--paper); }
.sl-end .button-line { color: var(--ink); border-color: var(--ink-line); }
@media (hover: hover) and (pointer: fine) { .sl-end .button-light:hover { background: var(--khareef); } .sl-end .button-line:hover { border-color: var(--ink); } }
@media (max-width: 599px) { .sl-end-actions .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sl-card.is-in { animation: none; } }