/* Grid tokens: 12 columns, 24px gutter, 8px baseline, 24px leading. Overlay shares the .container box. */
:root {
    --cols: 12;
    --bl: 8px;
    --lh: 24px;
    --gutter: 24px;
    --grid-col-ink: rgba(228, 0, 43, 0.35);
    --grid-col-fill: rgba(228, 0, 43, 0.05);
    --grid-row-ink: rgba(0, 150, 140, 0.34);
    --grid-row-ink-soft: rgba(0, 150, 140, 0.12);
}

.grid-guides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    pointer-events: none;
    z-index: 997;
}

body.grid-on .grid-guides {
    display: block;
}

.grid-guides .rows {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(to bottom, var(--grid-row-ink) 0 1px, transparent 1px var(--lh)),
        repeating-linear-gradient(to bottom, var(--grid-row-ink-soft) 0 1px, transparent 1px var(--bl));
}

.grid-guides .cols {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--container-max), 100% - (var(--container-pad) * 2));
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
    counter-reset: col;
}

.grid-guides .col {
    background: var(--grid-col-fill);
    border-left: 1px solid var(--grid-col-ink);
    border-right: 1px solid var(--grid-col-ink);
    counter-increment: col;
}

.grid-guides .col::before {
    content: counter(col);
    position: sticky;
    top: 0;
    display: block;
    padding: var(--bl) 0 0 var(--bl);
    font-family: var(--font-body);
    font-size: 10px;
    line-height: 16px;
    color: var(--grid-col-ink);
}