/* ═══════════════════════════════════════════ CONTAINER & SECTION ═══════════════════════════════════════════ */ .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--container-padding); } .container--narrow { max-width: var(--container-md); } .container--wide { max-width: var(--container-2xl); } section { position: relative; } .section { padding: var(--section-padding) 0; /* Sections are TRANSPARENT by default. The atmospheric backdrop sits on with background-attachment: fixed — sections without an explicit bg let that body backdrop show through, so the ambient wash flows continuously down the page without any seam at section boundaries. Sections that want to be a clean elevated panel use `--alt` (opaque cream-0) and intentionally cover the backdrop. */ } .section--tight { padding: calc(var(--section-padding) * 0.6) 0; } /* Section background — opaque elevated panels for visual rhythm. `--alt` lifts to cream-0 (warm near-white) so sequential sections alternate between the body's atmospheric cream + the clean elevated surface. Dark variants stay opaque ink. */ .section--alt { background-color: var(--cream-0); } .section--dark { background-color: var(--color-bg-dark); /* ink anchor */ color: var(--color-text-on-dark); } .section--deep { background-color: var(--color-bg-dark); /* ink anchor */ color: var(--color-text-on-dark); } .section__head { max-width: var(--container-md); margin: 0 auto var(--space-16); text-align: center; } .section__head--left { text-align: left; margin-left: 0; margin-right: 0; } .section__title { margin-top: var(--space-3); } .section__lead { margin: var(--space-5) auto 0; font-size: var(--text-lg); color: var(--color-text-soft); max-width: 54ch; } .section--dark .section__lead, .section--deep .section__lead { color: hsla(0, 0%, 100%, 0.75); /* white @ 75% on ink-dark surface */ } /* Home page — preserve the What's On section at the cream anchor so its rotating aurora + comet treatment reads exactly as the user already approves. Don't let `--alt` lift the bg here. */ #whats-on.section--alt { background: var(--cream-50); } /* ═══════════════════════════════════════════ GRID ═══════════════════════════════════════════ */ .grid { display: grid; gap: var(--space-6); } .grid--gap-lg { gap: var(--space-10); } .grid--gap-xl { gap: var(--space-12); } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .split { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; min-width: 0; } /* Grid items default to min-width: auto, which inflates the track to fit intrinsic min-content (e.g. a