/* Tafel · ds.css — the design-system page only. */
.ds-nav { position: sticky; top: 68px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-13); }
.ds-nav a { padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink-2); }
.ds-nav a:hover { background: var(--surface-2); color: var(--ink); }
.ds-layout { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-12); padding: var(--s-10) 0; }
@media (max-width: 900px) { .ds-layout { grid-template-columns: 1fr; } .ds-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
.ds-sec { padding-bottom: var(--s-16); border-bottom: 1px solid var(--line); margin-bottom: var(--s-12); }
.ds-sec h2 { font-family: var(--font-display); font-size: var(--t-32); font-weight: 500; font-variation-settings: 'opsz' 48, 'SOFT' 50; letter-spacing: -0.02em; margin-bottom: var(--s-2); }
.ds-sec > p { color: var(--ink-2); max-width: 70ch; margin-bottom: var(--s-6); }
.ds-sec h3 { margin: var(--s-8) 0 var(--s-3); font-size: var(--t-16); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.swatch { border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.swatch .c { height: 72px; display: flex; align-items: flex-end; padding: var(--s-2) var(--s-3); font-size: var(--t-12); font-weight: 600; }
.swatch .m { padding: var(--s-2) var(--s-3); font-size: var(--t-12); }
.swatch .m .mono { display: block; color: var(--ink-3); }
.type-row { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-6); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line-faint); }
.type-row .meta { font-size: var(--t-12); color: var(--ink-3); font-family: var(--font-mono); }
.space-row { display: flex; align-items: center; gap: var(--s-4); padding: 6px 0; font-size: var(--t-13); }
.space-row .bar { height: 14px; background: var(--paprika); border-radius: 3px; }
.space-row .mono { width: 60px; color: var(--ink-3); }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); align-items: start; }
.demo { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.demo.bg-ink { background: var(--chrome); border-color: var(--chrome); }
.demo > .kicker { margin-bottom: var(--s-3); }
.demo-kitchen { background: #22252B; border-color: #353A42; color: #F4F1EA; }
.ban-list li { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-faint); font-size: var(--t-15); }
.ban-list li .ico { color: var(--danger); flex: none; margin-top: 2px; }
.radius-row { display: flex; gap: var(--s-3); align-items: flex-end; }
.radius-row span { width: 60px; height: 60px; background: var(--surface-2); border: 1px solid var(--line-strong); display: grid; place-content: end center; font-size: 11px; color: var(--ink-3); padding-bottom: 4px; }