/* /products and /projects. Hand written. Loaded only by those two pages through their HEAD block.
   Every class starts with cat- so nothing collides with styles.css. Uses the site palette. */

.cat-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.cat-jump a{font-size:15px;font-weight:600;text-decoration:none;color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.cat-jump a:hover{border-color:var(--ocg);color:var(--ocg-deep)}

.cat-item{scroll-margin-top:12px}
.cat-item h2{margin-bottom:4px}
.cat-item .lede{margin-top:10px;margin-bottom:24px}
.cat-status{display:inline-block;margin-left:8px;font-size:12px;letter-spacing:.06em;padding:3px 10px;border-radius:999px;background:var(--ocg-soft);color:var(--ocg-deep);vertical-align:1px}

.cat-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px;align-items:start}
.cat-grid.cat-solo{grid-template-columns:minmax(0,1fr)}
.cat-copy p{color:var(--ink-2)}
@media (max-width:820px){.cat-grid{grid-template-columns:minmax(0,1fr);gap:8px}}

.cat-facts{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:6px 18px}
.band.alt .cat-facts{background:var(--paper)}
.band:not(.alt) .cat-facts{background:var(--card)}
.cat-facts > div{padding:12px 0;border-bottom:1px solid var(--line)}
.cat-facts > div:last-child{border-bottom:0}
.cat-facts dt{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.cat-facts dd{margin:0;font-size:16px;color:var(--ink)}

.cat-sub{margin:28px 0 10px}
.cat-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:6px 0 4px;background:var(--card)}
.cat-groups > div{padding:14px;border-right:1px solid var(--line);display:grid;gap:4px}
.cat-groups > div:last-child{border-right:0}
.cat-groups b{font-family:'Bricolage Grotesque',Figtree,sans-serif;font-size:18px;color:var(--ocg)}
.cat-groups span{font-size:15px;color:var(--ink-2)}
@media (max-width:640px){.cat-groups{grid-template-columns:1fr 1fr}.cat-groups > div:nth-child(2){border-right:0}.cat-groups > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

.cat-loops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
.cat-loops > div{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--ocg);border-radius:12px;padding:16px}
.cat-loops b{font-family:'Bricolage Grotesque',Figtree,sans-serif;font-size:17px}
.cat-loops p{margin:6px 0 0;font-size:15.5px}
@media (max-width:640px){.cat-loops{grid-template-columns:1fr}}