/* ============================================================================
 * lumen-sections.css — standard section component (12-col grid).
 * Per the AI brief 2026-06-15 23:30 UTC.
 * ========================================================================== */

.section {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--s-7) var(--s-5);
}
.section--alt { background: var(--jp-cream-300); }
.section__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s-5);
}
.section__title {
    grid-column: span 12;
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-h2);
    margin: 0 0 var(--s-6);
    color: var(--jp-ink, #2A2D38);
}
.section__kicker {
    grid-column: span 12;
    font-family: var(--ff-sans);
    font-size: 0.72rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--page-accent, var(--jp-gold-300));
    margin: 0 0 var(--s-2);
}
.section__lede {
    grid-column: span 12;
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: var(--jp-ink-soft, #5A6173);
    margin: 0 0 var(--s-5);
}
.section__col--text   { grid-column: span 7; }
.section__col--art    { grid-column: span 5; }
.section__col--half   { grid-column: span 6; }
.section__col--third  { grid-column: span 4; }
.section__col--quarter{ grid-column: span 3; }
.section__col--full   { grid-column: span 12; }

@media (max-width: 900px) {
    .section__col--text,
    .section__col--art,
    .section__col--half,
    .section__col--third,
    .section__col--quarter { grid-column: span 12; }
}
@media (max-width: 768px) {
    .section { padding: var(--s-5) var(--s-3); }
    .section__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}