/* ==========================================================================
   Hub pages: the shared type system and card recipe (Oct 2026 redesign).
   Plan: docs/plans/tracker-hub.md · concepts: docs/plans/hub-redesign/.

   Every redesigned hub (/tracker/ first; /comparisons/, /methodology/, the
   glossary and /about/ next) takes its TYPE and its ONE CARD from here, and
   designs its own opening. A unified hero shell was rejected on 21 Oct 2026.
   Classes are `rv-hb-*` because `rv-card`, `rv-label` and `rv-eyebrow`
   already mean other things in this theme.
   ========================================================================== */

.rv-hb-wrap { max-width: var(--rv-frame, 1200px); margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
@media (max-width: 640px) { .rv-hb-wrap { padding: 0 16px; } }

/* type: Literata for display and reading, Inter for apparatus */
/* The page title is a plain name at 30px. The big serif headline with one
   coloured italic word was retired by the owner on 29 Oct 2026 (DESIGN.md §6):
   an opening leads with what its page shows, not with a headline. */
.rv-hb-h1 { font: 500 var(--rv-text-3xl)/1.15 var(--rv-font-serif); letter-spacing: -0.01em; color: var(--rv-text-heading); margin: 0; }
.rv-hb-dek { font: 400 var(--rv-text-xl)/1.5 var(--rv-font-serif); color: var(--rv-text-secondary); margin: 0; }
.rv-hb-eyebrow { font: 600 var(--rv-text-xs)/1.3 var(--rv-font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-gold-on-light); margin: 0; }
.rv-hb-sec-title { font: 500 var(--rv-text-3xl)/1.15 var(--rv-font-serif); color: var(--rv-text-heading); margin: 0; }
.rv-hb-rule { font: 400 var(--rv-text-md)/1.5 var(--rv-font-sans); color: var(--rv-text-muted); margin: 0; }
.rv-hb-card-title { font: 500 var(--rv-text-xl)/1.3 var(--rv-font-serif); color: var(--rv-text-heading); margin: 0; }
.rv-hb-body { font: 400 var(--rv-text-base)/1.6 var(--rv-font-serif); color: var(--rv-text-secondary); margin: 0; }
.rv-hb-meta { font: 400 var(--rv-text-md)/1.45 var(--rv-font-sans); color: var(--rv-text-muted); margin: 0; }
.rv-hb-label { font: 600 var(--rv-text-xs)/1.3 var(--rv-font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-text-muted); }
.rv-hb-link { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--rv-text-md)/1.3 var(--rv-font-sans); color: var(--rv-brand-accent); text-decoration: none; }
.rv-hb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-hb-link svg { width: 14px; height: 14px; flex: none; }

/* the one card: white, hairline, radius 12, no tinted head; a picture goes flush to its edge */
.rv-hb-card { background: var(--rv-surface-primary); border: 1px solid var(--rv-border-primary); border-radius: var(--rv-radius-lg); box-shadow: var(--rv-shadow-sm); overflow: hidden; }

/* grounds: white by default, the cool grey, the image plate behind robots */
.rv-hb-grey { background: var(--rv-surface-secondary); }
.rv-hb-plate { background: var(--rv-image-plate-gradient); }

/* controls */
.rv-hb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border: 1px solid var(--rv-border-primary); border-radius: var(--rv-radius-pill); font: 500 var(--rv-text-md)/1.2 var(--rv-font-sans); color: var(--rv-text-secondary); background: var(--rv-surface-primary); cursor: pointer; }
.rv-hb-chip:hover { border-color: var(--rv-text-muted); }
.rv-hb-chip[aria-pressed="true"] { background: var(--rv-brand-fill); border-color: var(--rv-brand-fill); color: var(--rv-text-on-fill); }
.rv-hb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--rv-radius-md); background: var(--rv-brand-fill); color: var(--rv-text-on-fill); font: 600 var(--rv-text-md)/1.2 var(--rv-font-sans); text-decoration: none; cursor: pointer; }
.rv-hb-btn:hover { filter: brightness(1.12); }
.rv-hb-btn[disabled] { opacity: 0.6; cursor: default; }
.rv-hb-chip:focus-visible,
.rv-hb-btn:focus-visible,
.rv-hb-link:focus-visible { outline: 2px solid var(--rv-brand-accent); outline-offset: 2px; }