/* The site's own blocks: layout only (rules/styling.md). Colour, type, borders
 * and shadows come from the design system (alisx.css) and Material's theme
 * set from it (bridge.css). */

/* ---------- Home hero (the expressive treatment, rules/register.md) ---------- */
.alis-hero {
  padding: var(--space-24) 0 var(--space-32);
}
.md-typeset .alis-hero h1 {
  max-width: 12em;
  text-wrap: balance;
}
.md-typeset .alis-hero p {
  max-width: var(--measure-prose);
}
/* The headline's red terminal mark: Alis red is the mark (rules/register.md). */
.md-typeset .alis-hero h1 .alis-signal {
  color: var(--signal);
}
.md-typeset .alis-hero .alis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

/* ---------- Diagrams (javascripts/diagrams.js) ---------- */
/* A diagram takes the column and starts at its leading edge, as prose does;
 * one wider than the column scrolls inside its figure. */
.md-typeset figure.docs-diagram {
  width: 100%;
  margin: var(--space-24) 0;
  overflow-x: auto;
  text-align: start;
}