/* ================================================================ grid.css — 16-column page grid Named lines c1–c17. Responsive collapse: 16 → 8 → 4. Applied via .page-grid or directly on sectioning elements. ================================================================ */ /* ── Grid track definition ── */ :root { --page-grid-cols: [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7] 1fr [c8] 1fr [c9] 1fr [c10] 1fr [c11] 1fr [c12] 1fr [c13] 1fr [c14] 1fr [c15] 1fr [c16] 1fr [c17]; } /* Tablet: 8 active columns. c9–c17 collapse to one line. */ @media (min-width: 768px) and (max-width: 1199px) { :root { --page-grid-cols: [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7] 1fr [c8] 1fr [c9 c10 c11 c12 c13 c14 c15 c16 c17]; } } /* Mobile: 4 active columns. c5–c17 collapse. */ @media (max-width: 767px) { :root { --page-grid-cols: [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5 c6 c7 c8 c9 c10 c11 c12 c13 c14 c15 c16 c17]; } } /* ── Grid application ── Every full-width section uses this grid. Add selectors here as new sections are created. */ .page-grid { display: grid; grid-template-columns: var(--page-grid-cols); column-gap: var(--grid-gutter); padding-inline: var(--grid-margin); max-width: var(--grid-max); width: 100%; } /* ── Full-bleed utility ── Child spans all columns, ignoring padding. */ .full-bleed { grid-column: 1 / -1; } /* ── Grid dot overlay (debug / decorative) ── Toggled via [data-show-grid] on . Renders a dot at each column line intersection, à la 100r.no — subtle, aligned, slightly organic. */ [data-show-grid] .page-grid::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: radial-gradient( circle, color-mix(in srgb, var(--c-fg) 15%, transparent) 1px, transparent 1px ); background-size: var(--grid-gutter) var(--sp-3); background-position: var(--grid-margin) 0; }