/* NotSquat asset-preview system: black / white / teal / blue */
.asset-lab { border-top: 1px solid #1d2b3a; }
.asset-lab-grid { display:grid; grid-template-columns: 1.35fr .85fr; gap: 1rem; }
.asset-card { margin:0; border:1px solid #233244; background:#080b10; padding:1rem; }
.asset-card--wide { grid-row: span 2; }
.asset-concept { display:block; width:100%; height:auto; object-fit:cover; border:1px solid #233244; background:#000; filter:saturate(.85) contrast(1.08); }
.asset-concept--hero { max-height:620px; }
.asset-card figcaption { display:flex; justify-content:space-between; gap:1rem; padding-top:.8rem; color:#fff; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; }
.asset-card figcaption span { color:#6e8299; text-align:right; }
.palette-card { display:flex; flex-direction:column; justify-content:space-between; gap:1.3rem; font-family:var(--font-mono); color:#fff; text-transform:uppercase; letter-spacing:.08em; }
.swatches { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.swatches i { min-height:72px; padding:.6rem; display:flex; align-items:flex-end; background:var(--swatch); color: #fff; font-style:normal; font-size:.68rem; text-shadow:0 1px 2px #000; border:1px solid #33404d; }
.swatches i:nth-child(2) { color:#000; text-shadow:none; }
@media (max-width: 760px) { .asset-lab-grid { grid-template-columns:1fr; } .asset-card--wide { grid-row:auto; } .asset-card figcaption { flex-direction:column; gap:.2rem; } .asset-card figcaption span { text-align:left; } }