/* =========================================================================
   QPN Catalyst — qpn-roles: "How the QPN fits together" explainer block.

   A self-contained section that answers the one question the ecosystem strip
   never does: how do the three QPN bits relate? It pairs an eyebrow / title +
   serif lead line with three role cards (reusing .qpn-uc--row from
   qpn-cards.css) and a gold-ruled contribution-reach "build" strip.

   CROSS-SITE SHARED BLOCK (Rich, 2026-06-14). The copy — the title
   "Three roles, one network.", the serif lead, the three role-card bodies +
   tags, and the build-strip text + target pills — is a content contract
   shared verbatim with webshield.io and ep3foundation.org. Only the skin,
   the eyebrow, the "You are here" card, and the per-page CTA are site-local.
   Any change to that copy or the build-strip model must be coordinated across
   all three QPN sites. See CLAUDE.md.

   NATIVE SKIN (deliberately NOT a copy of webshield's ws-qpn-roles): all
   color, type, spacing, and rule weights come from qpn-shared.css's --qpn-*
   tokens (warm paper, gold #8A6B2E, Source Serif / Inter / JetBrains Mono),
   echoing the .qpn-section rhythm so the block sits natively among the home
   beats and the /ecosystem sections. Same contract, native skin per site —
   exactly like the ecosystem strip's relationship, inverted.

   The three roles run FOUNDATION-FIRST (Architecture → Accelerators →
   Catalyst), deliberately the reverse of the ecosystem strip's Catalyst-first
   roster: the strip optimizes for wayfinding, this block for the logical
   dependency. The build strip carries the corrected model — a contribution
   builds ANY part of the QPN (an Accelerator, the Architecture, the funding
   behind it, …), not only an Accelerator.

   Load order: qpn-shared.css → qpn-cards.css → THIS FILE → styles.css
   (must load after qpn-cards.css — it extends .qpn-uc--row's rail).
   ========================================================================= */

.qpn-roles {
  background: var(--qpn-page);
}
.qpn-roles__wrap {
  max-width: var(--qpn-w-marketing);
  margin: 0 auto;
  padding: var(--qpn-sp-7) var(--qpn-sp-7) var(--qpn-sp-6);
}

/* ── Heading block — mirrors the .qpn-section eyebrow/title rhythm ─────── */
.qpn-roles__eyebrow {
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-label);
  letter-spacing: var(--qpn-tracking-label);
  text-transform: uppercase;
  color: var(--qpn-accent);
  font-weight: 600;
  margin-bottom: var(--qpn-sp-2);
}
.qpn-roles__title {
  font-family: var(--qpn-font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: var(--qpn-lh-tight);
  letter-spacing: -0.01em;
  color: var(--qpn-ink);
  margin: 0 0 var(--qpn-sp-3);
  max-width: 760px;
}
/* Lead — serif anchor sentence (weight 400, like .qpn-chero__subtitle). */
.qpn-roles__lead {
  font-family: var(--qpn-font-display);
  font-size: var(--qpn-fs-lede);
  line-height: var(--qpn-lh-lede);
  font-weight: 400;
  color: var(--qpn-ink-muted);
  margin: 0 0 var(--qpn-sp-6);
  max-width: 760px;
}
.qpn-roles__lead strong {
  color: var(--qpn-ink);
  font-weight: 600;
}

/* ── Three role cards (host grid; cards are .qpn-uc.qpn-uc--row) ───────── */
.qpn-roles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--qpn-sp-4);
  margin-bottom: var(--qpn-sp-6);
}

/* Re-stack the row card's rail (which is horizontal in qpn-cards.css) into a
   column for these identity-led cards: ordinal → name → site, over the
   hairline divider the .qpn-uc--row rail already carries. Equal specificity
   to qpn-cards.css's .qpn-uc--row .qpn-uc__rail, so this must load after it. */
.qpn-roles .qpn-uc__rail {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.qpn-roles .qpn-uc__ordinal {
  margin-left: 0;        /* undo the row variant's right-push */
  margin-bottom: 6px;
}

/* Site / domain sub-label under the role name (non-link — the CTA carries the
   outbound action; the linked directory lives below on /ecosystem). */
.qpn-roles__site {
  font-family: var(--qpn-font-mono);
  font-size: 11px;
  letter-spacing: var(--qpn-tracking-mono);
  color: var(--qpn-ink-faint);
  margin-top: 2px;
}

/* Per-card role tag (what / where / how) — gold mono micro under the body. */
.qpn-roles__tag {
  margin-top: var(--qpn-sp-3);
  font-family: var(--qpn-font-mono);
  font-size: var(--qpn-fs-micro);
  letter-spacing: var(--qpn-tracking-mono);
  text-transform: uppercase;
  color: var(--qpn-accent);
}

/* ── Contribution clarifier — the Catalyst's reach ─────────────────────
   2px gold top rule reuses the site's load-bearing proof-rule motif
   (footer top edge, .qpn-uc--resource card foot). */
.qpn-roles__build {
  border-top: var(--qpn-rule-anchor) solid var(--qpn-accent);
  padding-top: var(--qpn-sp-5);
}
.qpn-roles__build-text {
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-body);
  line-height: var(--qpn-lh-body);
  color: var(--qpn-ink-muted);
  margin: 0 0 var(--qpn-sp-4);
  max-width: 760px;
}
.qpn-roles__build-text strong {
  color: var(--qpn-ink);
  font-weight: 600;
}

/* Target pills — what a contribution can build. */
.qpn-roles__targets {
  list-style: none;
  margin: 0 0 var(--qpn-sp-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.qpn-roles__targets li {
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-body-sm);
  font-weight: 500;
  color: var(--qpn-ink);
  background: var(--qpn-surface);
  border: var(--qpn-rule-hair) solid var(--qpn-rule);
  border-radius: 2px;
  padding: 7px 12px;
}
.qpn-roles__target--more {
  color: var(--qpn-ink-faint);
  font-style: italic;
  background: transparent !important;
  border-style: dashed !important;
}

/* CTA — gold link-out (home → /ecosystem; /ecosystem → the on-ramp). */
.qpn-roles__cta {
  display: inline-block;
  font-family: var(--qpn-font-body);
  font-size: var(--qpn-fs-body-sm);
  font-weight: 500;
  color: var(--qpn-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--qpn-accent);
  padding-bottom: 2px;
}
.qpn-roles__cta:hover {
  color: var(--qpn-accent-hover);
  border-bottom-color: var(--qpn-accent-hover);
}
.qpn-roles__cta:focus-visible {
  outline: 2px solid var(--qpn-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Responsive ────────────────────────────────────────────────────────
   3 identity-led cards read poorly in the tablet band, so collapse straight
   to a single column rather than an awkward 2-up (2 + 1). */
@media (max-width: 900px) {
  .qpn-roles__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .qpn-roles__wrap { padding: var(--qpn-sp-6) var(--qpn-sp-4); }
}