/* JBNX design library: hub, section and item pages. Builds on design-site.css. */
.ds-sub { padding: 6px max(20px, calc((100vw - 1360px) / 2 + 20px)); background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); }
.dl-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.dl-project { margin: 28px 0 10px; font: 600 13px/1.2 var(--ds-font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--ds-muted); }
.dl-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ds-soft); border-bottom: 1px solid var(--ds-line); }
.dl-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dl-status { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--ds-soft); font-size: 12px; color: var(--ds-muted); }
.dl-status[data-status="standard"] { background: #e8efe9; color: #24563a; }
.dl-status[data-status="retired"] { background: #f3ecea; color: #7a3a30; }
.dl-files { columns: 2 260px; padding-left: 18px; }
.dl-files li { break-inside: avoid; margin: 2px 0; }
.dl-screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dl-screens figure { margin: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); overflow: hidden; background: var(--ds-surface); }
.dl-screens img { display: block; width: 100%; height: auto; }
.dl-screens figcaption { padding: 8px 10px; font-size: 13px; }
.dl-video { width: 100%; max-width: 960px; height: auto; border-radius: var(--ds-radius); background: #000; }
.dl-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.dl-clips video { width: 100%; height: auto; border-radius: 8px; background: #000; }
.ds-code pre { max-height: 480px; }
details.dl-code > summary { cursor: pointer; font-weight: 600; margin: 10px 0; }
@media (max-width: 640px) { .dl-files { columns: 1; } }