/* ── Background grain ────────────────────────────────────────────────────────── */
/* Subtle noise texture over the dark background.
   Replace the data URI with a real grain image when available. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    /* Placeholder: swap for actual grain image asset */
    /* background-image: url('../images/grain.png'); */
}


/* ── Container ───────────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    padding-left:  var(--container-pad);
    padding-right: var(--container-pad);
    margin: 0 auto;
}

/* Content modifier — 2× padding creates editorial breathing room vs header/footer */
.container--content {
    padding-left:  calc(var(--container-pad) * 2);
    padding-right: calc(var(--container-pad) * 2);
}


/* ── 12-column grid (main content) ──────────────────────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
}


/* ── 24-column grid (header / footer) ───────────────────────────────────────── */

.grid-full {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: var(--grid-gap);
}


/* ── Section spacing ─────────────────────────────────────────────────────────── */

.section {
    position: relative;
    padding-top:    var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.section--sm {
    padding-top:    var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}