.s-samples { margin: 24px clamp(16px,5vw,76px) 48px; scroll-margin-top: 100px; color: var(--ors-ink,#ecedff); }
.s-eyebrow { font: 11px/1.6 var(--font-mono,ui-monospace,monospace); letter-spacing: .12em; color: var(--ors-lime,#bef264); }
.s-samples h2 { font: 800 clamp(22px,3vw,36px)/1.25 var(--font-display,system-ui,sans-serif); letter-spacing: -.04em; margin: 8px 0 12px; }
.s-intro { color: #b8bdd5; margin: 0 0 24px; max-width: 70ch; }
.s-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.s-card { min-width: 0; padding: 22px; border: 1px solid #ffffff26; border-top: 3px solid #a855f7; background: linear-gradient(140deg,#191126,#101524); }
.s-card-head { display: grid; grid-template-columns: 80px minmax(0,1fr); align-items: center; gap: 15px; }
.s-card img { width: 80px; height: 80px; object-fit: cover; border: 1px solid #ffffff26; }
.s-card h3 { margin: 0 0 6px; font: 700 20px/1.2 var(--font-body,system-ui,sans-serif); overflow-wrap: anywhere; color: #ecedff; }
.s-card .s-author { color: #c7cbe0; font-size: 12px; margin: 0; }
.s-card .s-excerpt { font-size: 14px; color: #d5d8ea; margin: 20px 0 5px; }
.s-card .s-credit { font-size: 12px; color: #b8bdd5; min-height: 38px; margin: 0 0 10px; }
.s-card .s-label { display: block; font: 11px/1.6 var(--font-mono,ui-monospace,monospace); color: #d2b7fa; margin-bottom: 8px; }
.s-card audio { display: block; width: 100%; max-width: 100%; height: 44px; color-scheme: dark; }
.s-card .s-status { font-size: 11px; color: #b8bdd5; min-height: 34px; margin: 9px 0 12px; }
.s-card .s-link { font: 11px/1.6 var(--font-mono,ui-monospace,monospace); color: #bef264; text-decoration: none; display: inline-block; padding: 8px 0; }
.s-card .s-link:hover { text-decoration: underline; }
.s-card :focus-visible { outline: 3px solid #bef264; outline-offset: 4px; }
.s-project { margin: 0 0 30px; }
.s-project .s-card { max-width: 680px; }
@media(max-width:900px) { .s-grid { grid-template-columns: 1fr; } .s-credit { min-height: 0 !important; } }
@media(max-width:420px) { .s-card { padding: 18px; } .s-card-head { grid-template-columns: 64px minmax(0,1fr); gap: 13px; } .s-card img { width:64px;height:64px; } }