@layer utilities {
    .muted { color: var(--fg-muted); }
    .empty { color: var(--fg-muted); font-style: italic; }
    .inline-form { display: inline; }
    .stack > * + * { margin-top: var(--space-4); }
    /* When .stack carries a list, strip the bullets / numbers and
     * the user-agent left padding so the items align with the
     * surrounding prose. Common case is "row per entry" layouts
     * (search hits, feeds) where the caller wants vertical
     * rhythm, not a marker column. Lists that genuinely need
     * markers shouldn't carry .stack. */
    ol.stack, ul.stack {
        list-style: none;
        padding-left: 0;
    }

    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        align-items: center;
    }
    /* Spread modifier — children pushed to the ends. Pair with
     * .cluster on a header that holds a title on one side and an
     * action on the other. */
    .cluster-spread { justify-content: space-between; }
    /* Baseline-align modifier — items sit on a shared text baseline
     * (good for "heading + button" rows where heading is taller). */
    .cluster-baseline { align-items: baseline; }

    .text-center { text-align: center; }
    .text-left   { text-align: left;   }
    .text-right  { text-align: right;  }

    .fine-print {
        color: var(--fg-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
    }
    .fine-print a { color: inherit; text-decoration: underline; }
    .fine-print a:hover { color: var(--fg); }

    /* Heading rule. Opt-in baseline border for a heading (Wikipedia /
     * MDN look) — applied per-element, or globally to long-form prose
     * inside an <article>. */
    .h-rule,
    article > h1,
    article > h2 {
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--border);
    }

    /* Small uppercase label for short single-word section headings:
     * sidebar TOC, dropdown labels, etc. Keep the source text short
     * — multi-word phrases in Cyrillic / similar scripts read as
     * shouting in caps; that's a content concern, not a style one. */
    .eyebrow {
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--fg-muted);
        font-weight: var(--weight-semibold);
    }

    /* Inline icon — 1em square, follows currentColor via the SVG
     * sprite's stroke="currentColor". */
    .icon {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        vertical-align: -0.15em;
        display: inline-block;
    }

    /* Cap on a standalone block's width — matches the form column.
     * No centring, no flex layer, just a ceiling. Use to keep a
     * non-form section (members list, fact panel, etc.) from
     * stretching to the full main column on wide screens. */
    .measure { max-width: 32em; }

    .ml-auto { margin-left: auto; }

    /* Spin in place. Pair with an icon for an in-progress indicator. */
    .spin { animation: stratum-spin 1s linear infinite; }
}
@keyframes stratum-spin {
    to { transform: rotate(360deg); }
}