/* Art of Truth Beta — Layout: 12-col grid, gutters, breakpoints */

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

.site-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--gutter-desktop);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 1.5rem;
}

/* ── Lead + Rail split (8/4) ─────────────────────────────────────────────── */

.lead-col {
    grid-column: 1 / 9;
}
.rail-col {
    grid-column: 9 / 13;
}

/* ── Desks grid (3×2) ────────────────────────────────────────────────────── */

.desks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--rule-weak);
}
.desk-cell {
    background-color: var(--ink-0);
}

/* ── Section header rule ─────────────────────────────────────────────────── */

.section-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule-strong);
}
.section-header__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mute-0);
}

/* ── Breakpoint: 1200px — narrower gutters only ──────────────────────────── */
/* (Removed the html font-size: 14.4px shrink; it produced unreadable
   body text on tablets and contradicted the larger-fonts direction
   adopted in hotfix-011/012/013.) */

@media (max-width: 1200px) {
    .site-container {
        padding: 0 calc(var(--gutter-desktop) * 0.7);
    }
}

/* ── Breakpoint: 900px — lead+rail stack, desks 2-col ────────────────────── */

@media (max-width: 900px) {
    .site-container {
        padding: 0 var(--gutter-narrow);
    }
    .lead-col,
    .rail-col {
        grid-column: 1 / -1;
    }
    .desks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Breakpoint: 640px — mobile layouts ──────────────────────────────────── */

@media (max-width: 640px) {
    .desks-grid {
        grid-template-columns: 1fr;
    }
    .content-grid {
        display: block;
    }
}