/* ========================================================= FireHose web_v2 — atomic layout helpers --------------------------------------------------------- Small utility classes for common compositions. Not a full atomic CSS framework — just enough to avoid putting layout decisions inside macros. ========================================================= */ /* Flex compositions */ .row { display: flex; align-items: center; } .row-y { display: flex; flex-direction: column; } .col { display: flex; flex-direction: column; } .center { display: flex; align-items: center; justify-content: center; } .between { display: flex; align-items: center; justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .shrink-0 { flex: 0 0 auto; } /* Grid */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); } /* Display headings — declared BEFORE the spacing utilities so that `.mt-N` / `.mb-N` on the same element win the specificity tie via source-order. Solo use (`

`) still gets the intended `margin: 0` reset. */ /* Page-level display heading. Replaces the hand-rolled `font-family: display; font-size: 48px; weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin: 0;` block that every v2 page was inlining on its

. */ .h1-display { font-family: var(--font-display); font-size: var(--fs-48); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin: 0; } /* Section heading — display font @ 22px, used for h2s in settings, reader annotation rail, etc. The default `margin: 0` matches every inline use; override with `.mb-N` / `.mt-N` if vertical rhythm is needed. */ .h2-display { font-family: var(--font-display); font-size: var(--fs-22); font-weight: 600; margin: 0; } /* Spacing — uses 4px-grid tokens */ .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .gap-7 { gap: var(--space-7); } .gap-8 { gap: var(--space-8); } .gap-9 { gap: var(--space-9); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mt-8 { margin-top: var(--space-8); } .mt-9 { margin-top: var(--space-9); } .mt-10 { margin-top: var(--space-10); } .mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); } .mr-3 { margin-right: var(--space-3); } .mr-4 { margin-right: var(--space-4); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-7 { margin-bottom: var(--space-7); } .mb-8 { margin-bottom: var(--space-8); } .mb-9 { margin-bottom: var(--space-9); } .mb-10 { margin-bottom: var(--space-10); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-7 { padding: var(--space-7); } .p-8 { padding: var(--space-8); } .p-9 { padding: var(--space-9); } .px-7 { padding-left: var(--space-7); padding-right: var(--space-7); } .py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); } /* Containers */ .container { max-width: var(--container-app); margin: 0 auto; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; } .container-prose { max-width: var(--container-prose); margin: 0 auto; } .container-wide { max-width: var(--container-wide); margin: 0 auto; } /* Visibility */ .hidden { display: none; } @media (max-width: 640px) { .sm-hidden { display: none; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (min-width: 641px) { .sm-only { display: none; } } /* Sizing helpers */ .w-full { width: 100%; } .h-full { height: 100%; } .min-w-0 { min-width: 0; } /* Text helpers */ .text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .text-display { font-family: var(--font-display); } .text-muted { color: var(--fg-3); } .text-fg-2 { color: var(--fg-2); } .text-accent { color: var(--accent); } .text-balance { text-wrap: balance; } .text-eyebrow { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); } /* `.h1-display` and `.h2-display` are declared earlier in this file (before the spacing utilities) so that `.mt-N` / `.mb-N` on the same element can win the specificity tie via source-order. */ /* Inline link reset — used for crumbs / nav links that should not underline by default. */ .no-underline { text-decoration: none; } /* Inline link affordance — bare-text link styling that picks up the surrounding font size + color and gains an underline only on hover. Used in tables / lists where a full ".btn" would be too heavy. */ .link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-chrome, 120ms) var(--ease, ease); } .link:hover { border-bottom-color: currentColor; } /* List reset for
    /