/* === LAYOUT & WRAPPERS === */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

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

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.page-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 992px) {
    .page-layout {
        grid-template-columns: 1fr;
    }
}

.single-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 992px) {
    .single-layout {
        grid-template-columns: 1fr;
    }
}

.page-layout-left {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 992px) {
    .page-layout-left {
        grid-template-columns: 1fr;
    }
}

.section {
    padding: 72px 0;
}

/* Alternating section tint. This modifier is applied to 5 sections on
   the front page (plus the affiliate-book templates) but was never
   defined anywhere, so every one of them silently rendered on the plain
   body background — which is why the homepage reads as one flat wall
   with no sectional rhythm. --bg-section exists for exactly this and
   was going unused on every section of the site. */
.section-bg {
    background: var(--bg-section);
}

.section-sm {
    padding: 48px 0;
}

.section-lg {
    padding: 96px 0;
}