/* ===== Layout: container + row/cols (uses global tokens) ===== */
       .container {
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--gutter-x);
        /* equals column padding for clean edges */
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        margin-inline: calc(-1 * var(--gutter-x));
        row-gap: var(--gutter-y);
    }

    [class^="col-"],
    [class*=" col-"] {
        box-sizing: border-box;
        padding-inline: var(--gutter-x);
        /* matches container */
        flex: 0 0 auto;
    }

    /* Fractions */
    .col-100 {
        width: 100%
    }

    .col-75 {
        width: 75%
    }

    .col-66 {
        width: 66.6667%
    }

    .col-50 {
        width: 50%
    }

    .col-40 {
        width: 40%
    }

    .col-33 {
        width: 33.3333%
    }

    .col-25 {
        width: 25%
    }

    .col-20 {
        width: 20%
    }

    /* Responsive helpers */
    @media (max-width:900px) {
        .md-100 {
            width: 100%
        }

        .md-66 {
            width: 66.6667%
        }

        .md-50 {
            width: 50%
        }

        .md-33 {
            width: 33.3333%
        }
    }

    @media (max-width:600px) {
        .sm-100 {
            width: 100%
        }

        .sm-50 {
            width: 50%
        }

        .container { padding-inline: 0; }
    }

    /* Optional container width variants for special sections */
    .container--narrow {
        max-width: 60rem;
    }

    /* ~960px */
    .container--wide {
        max-width: 90rem;
    }

    /* Section Gaps*/
    
    /* 1) Remove global margins on all sections */
    section {
        margin-block: 0;
    }

    /* 2) Add space ONLY between adjacent top-level sections */
    :where(body)> :where(section)+ :where(section) {
        margin-block-start: var(--section-gap);
    }

    /* 3) Gentle breathing room inside each section (optional) */
    :where(body)> :where(section) {
        padding-block: clamp(8px, 2vw, 24px);
    }

    /* 4) Quick modifiers per module */
    :where(section)[data-space="loose"] {
        --section-gap: clamp(20px, 4vw, 40px);
    }

    :where(section)[data-space="loose"] {
        --section-gap: clamp(36px, 8vw, 96px);
    }

    /* 5) Fine-tune by breakpoint (optional) */
    @media (max-width:600px) {
        :root {
            --section-gap: clamp(20px, 7vw, 48px);
        }
    }

    @media (min-width:1024px) {
        :root {
            --section-gap: clamp(32px, 5vw, 96px);
        }
    }

    /* Nice anchor scrolling if you have a sticky header */
    [id] {
        scroll-margin-top: 72px;
    }