/* Brand pack. Mostly swatches and files, so the page is a grid of samples. */
.brand-marks { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--s-4); }
.brand-marks figure { margin: 0; padding: var(--s-6) var(--s-5) var(--s-4); border: 1px solid var(--line); border-radius: 3px; text-align: center; }
.brand-marks img { margin: 0 auto; }
.brand-marks figcaption { margin-top: var(--s-4); font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.06em; }
.brand-marks .on-light { background: #fbfcfe; }
.brand-marks .on-light figcaption { color: #47536b; }
.brand-marks .on-dark { background: #0a1a34; }
.brand-marks .on-dark figcaption { color: #9fb0c9; }
.brand-marks .on-dark img { filter: brightness(0) invert(1); }

.brand-files { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.brand-files li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand-files span { color: var(--ink-faint); font-size: var(--t-13); font-variant-numeric: tabular-nums; }

.swatches { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.swatches li { display: flex; flex-direction: column; gap: 4px; }
.sw { display: block; height: 56px; border-radius: 3px; border: 1px solid var(--line); }
.swatches b { font-size: var(--t-14); }
.swatches code { font-size: var(--t-12); color: var(--ink-soft); }