/* Public cohort catalog — only what ../shared/brand.css does not already
   provide. No raw hex: everything resolves to a BRANDBOOK.md custom property. */

/* The banner mark is drawn in Alluvion's own strata, not the Synapse parent's
   navy + amber (BRANDBOOK.md:14, :24). Fills live here rather than on the SVG
   because var() is not reliable in a presentation attribute. */
.portfolio-banner .mark .stratum   { fill: var(--riverbed-slate); }
.portfolio-banner .mark .accretion { fill: var(--iron-ochre); }
.portfolio-banner .banner-text     { flex: 1 1 12rem; }
.portfolio-banner .banner-cta      { text-decoration: none; white-space: nowrap; }

/* This page is a marketing surface rather than an app shell, so the bar reads
   as a page header on Bone rather than the saturated slate chrome. */
header.app-bar {
  display: block;
  background: transparent;
  color: var(--text);
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 0 1.25rem;
}
header.app-bar h1 { color: var(--brand); font-size: 1.6rem; }
.subhead { color: var(--text-muted); margin: .4rem 0 0; max-width: 52ch; }

main { max-width: 900px; }

.catalog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--iron-ochre);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
}
.catalog-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.catalog-card p.description { color: var(--text-muted); margin: 0 0 .9rem; }

.metric-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: .9rem; }
.metric .value {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.metric .label {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pro-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pro-tag {
  background: var(--sandstone);
  color: var(--brand);
  border: 1px solid var(--fog);
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .78rem;
}

@media (max-width: 760px) {
  header.app-bar { margin-top: 1rem; padding: 0 .875rem; }
  header.app-bar h1 { font-size: 1.35rem; }
  .metric-row { gap: 1rem; }
}