/* Layout */ .l-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .l-container--narrow { max-width: 42rem; } .l-container--medium { max-width: 56rem; } .l-section { padding-block: var(--space-20); } .l-section--alt { background-color: var(--color-bg-alt); } .l-section--muted { background-color: var(--color-cream); } .l-section--dark { background-color: var(--color-dark); color: var(--color-text-inverse); } @media (min-width: 48rem) { .l-section { padding-block: var(--space-24); } } @media (min-width: 75rem) { .l-section { padding-block: var(--space-32); } } .l-grid { display: grid; gap: var(--space-6); } .l-grid--2 { grid-template-columns: 1fr; } .l-grid--3 { grid-template-columns: 1fr; } @media (min-width: 48rem) { .l-grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } .l-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } } .l-stack { display: flex; flex-direction: column; gap: var(--space-6); } .l-stack--sm { gap: var(--space-4); } .l-stack--lg { gap: var(--space-10); } .l-split { display: grid; gap: var(--space-10); align-items: center; } @media (min-width: 48rem) { .l-split { grid-template-columns: 1fr 1fr; gap: var(--space-16); } } .l-section-header { text-align: center; margin-bottom: var(--space-12); } .l-section-header--left { text-align: left; margin-bottom: var(--space-10); } @media (min-width: 48rem) { .l-section-header { margin-bottom: var(--space-16); } } /* Scroll reveal — progressive enhancement. Default: content is always readable (no white screen without JS). Animation runs only when is present. */ [data-animate] { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { html.js [data-animate]:not(.is-visible) { /* Keep opacity at 1 so delayed JS never blanks the page */ opacity: 1; transform: translateY(10px); transition: transform var(--duration-normal) var(--ease-out); } html.js [data-animate].is-visible { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { [data-animate], html.js [data-animate], html.js [data-animate]:not(.is-visible) { opacity: 1; transform: none; transition: none; } }