/**
 * Layout scope — escape hatch from global .main-content dashboard grid rules.
 *
 * Problem: style.css treats .main-content as a multi-column grid and forces many
 * descendants (section, div wrappers, etc.) to span full width. That is great for
 * Analysis / Portfolio dashboards but fights bespoke pages (long-form digest, marketing,
 * legal) where YOU own vertical rhythm and widths.
 *
 * Use ONE of these hooks on pages that should manage their own layout:
 *
 *   A) {% block body_class %}layout-self-directed{% endblock %}
 *   B) {% block main_content_class %}layout-freeform{% endblock %}
 *
 * Then scope your page CSS under the same hook so it beats stray globals, e.g.:
 *   body.layout-self-directed .digest-sheet { ... }
 *   .main-content.layout-freeform .my-hero { ... }
 *
 * Loaded after footer.css and before {% block extra_head %}, so inline/page styles
 * in extra_head still win when specificity matches — bump specificity if needed.
 */

body.layout-self-directed .main-content,
.main-content.layout-freeform {
    display: block;
    width: 100%;
    box-sizing: border-box;
    gap: 0;
}

/* Grid placement is meaningless outside grid; explicit reset avoids bugs if display changes later */
body.layout-self-directed .main-content > *,
.main-content.layout-freeform > * {
    grid-column: unset;
}