/* =========================================================
   Layout — page container, background layer, section scaffolding and labels.
   ========================================================= */

.container { width: min(1200px, 100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; }

/* blueprint layer: always there, but only just (one knob to tune it) */
.bg-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .3; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--tight { padding-top: 0; scroll-margin-top: 88px; }
.section__head { display: grid; gap: 12px; max-width: 780px; margin-bottom: clamp(28px, 3.5vw, 44px); }

/* a soft clearing in the blueprint wherever there's text to read */
.hero__copy, .section__head, .prog__head { position: relative; isolation: isolate; }
.hero__copy::before, .section__head::before, .prog__head::before {
  content: ""; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(243, 244, 248, .95) 60%, rgba(243, 244, 248, 0));
}
.section__head h2 { font-size: clamp(36px, 5.2vw, 64px); letter-spacing: -.045em; line-height: 1.02; }
.section__lead { max-width: 36em; font-size: 18px; color: var(--text); }

.label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.label::before { content: "//"; color: var(--accent); font-weight: 600; letter-spacing: 0; }
.label--light { color: rgba(238, 240, 255, .78); }