.wrap { box-sizing: border-box; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--gutter) * var(--spacing)); }

    :host { display: block; color: var(--body); font-size: calc(.95rem * var(--type-scale)); background: var(--ground); box-shadow: 0 -1px 0 var(--line); }
    .grid { display: grid; gap: calc(var(--space-8) * var(--spacing)); padding: calc(3rem * var(--spacing)) 0 calc(var(--space-4) * var(--spacing)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
    :host([bare]) .grid { display: none; }
    .brand { grid-column: span 2; }
    @media (max-width: 520px) { .brand { grid-column: auto; } }
    .legal { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space-4) * var(--spacing)); padding: calc(1.25rem * var(--spacing)) 0 calc(var(--space-8) * var(--spacing)); font-size: calc(var(--text-sm) * var(--type-scale)); color: var(--muted); }
    :host([variant=stacked]) .grid { grid-template-columns: minmax(0, 1fr); }
    :host([variant=stacked]) .brand { grid-column: auto; }
    :host([variant=compact]) .grid { padding-block: 1.5rem; gap: 1rem; }
    :host([variant=compact]) .brand { grid-column: auto; }
    .grid, .legal { overflow-wrap: anywhere; }