/* /for-venues/ (hub extras) - page-specific styles. Owner: DEV-1.
   House rules: brand tokens only (var(--green/--cream/--paper/--ink/
   --highlight/--dark), see base.css); prefix every new class in this file
   with `hub-`; shared components (.sect, .cards, .pill, .vchapter,
   .icard, .ph ...) live in base.css/page.css and are reused, never edited.
   Any animation must be wrapped so prefers-reduced-motion gets a static
   end state. */

/* ---------- "the brand creates demand." ----------

   The page's thesis, rebuilt 2026-09-11 as a dark chapter of illustrated
   cards. The stage, the cream type and the card component are all shared, so
   this file only has to place the row and the two closing lines. */

/* the component declares its own --icard-ratio default ON .icard, so a value
   set on the grid never reaches the image - it has to land on the card. 1.7 is
   this row's crop (page.css's table of per-row ratios). */
.hub-brand__cards .icard { --icard-ratio: 1.7; }

/* the frame breaks the sub into two lines; blocks keep that break without a
   <br>, and each half still wraps on its own measure on a phone */
.hub-brand__sub span { display: block; }

/* the closing pair is the chapter's landing, not a caption under the cards:
   chapter-scale air above it, then the two lines tight together */
.hub-brand__close { margin-top: 7svh; }
.hub-brand__close--lands {
  margin-top: 0.35em;
  font-weight: 700;
}

/* the "gets" row: .cards--4 holds 2x2 on phones for short cards, but these
   four carry a title and four lines each - 150px columns cramped them
   (audit 2026-09-11). One per row below 640. */
@media (max-width: 640px) {
  .cards.hub-gets { grid-template-columns: 1fr; }
}