/* ════════════════════════════════════════════════════════════════════
   NexFlow · Layout · sections, grid, wraps
   ════════════════════════════════════════════════════════════════════ */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--gutter); }

section { position: relative; z-index: var(--z-content); }

.section {
  padding: var(--section-y) 0;
  position: relative;
}
.section.tight { padding: var(--section-y-tight) 0; }
.section.bg-ink {
  background: var(--bg-ink);
  color: var(--fg-inv);
}
.section.bg-ink .t-lead, .section.bg-ink .t-body { color: var(--fg-inv-1); }
.section.bg-ink .t-small { color: var(--fg-inv-2); }
.section.bg-ink h1 em, .section.bg-ink h2 em, .section.bg-ink h3 em { color: var(--fg-inv-2); }
.section.bg-paper-2 { background: var(--bg-2); }

/* ── Grid utilities ───────────────────────────────────────────────── */
.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12-7 { grid-template-columns: 1.2fr .7fr; align-items: center; }
.grid-7-12 { grid-template-columns: .7fr 1.2fr; align-items: center; }

@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4, .grid-12-7, .grid-7-12 { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Stack utility (flex column with consistent gap) ──────────────── */
.stack { display: flex; flex-direction: column; }
.stack-2 { gap: 8px; }
.stack-3 { gap: 12px; }
.stack-4 { gap: 16px; }
.stack-5 { gap: 24px; }
.stack-6 { gap: 32px; }
.stack-7 { gap: 48px; }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-end { justify-content: flex-end; }
.row-between { justify-content: space-between; }

/* ── Geometric dividers (David Whyte-inspired) ────────────────────── */
.divider {
  position: relative; height: 1px; background: var(--rule);
  max-width: var(--maxw); margin: 0 auto;
}
.divider::before,
.divider::after {
  content: ""; position: absolute; top: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
}
.divider::before { left: 0; }
.divider::after  { right: 0; }

/* ── Section headers ─────────────────────────────────────────────── */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px; align-items: baseline;
  margin-bottom: clamp(36px, 5vw, 64px);
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.section-head .num {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(44px, 5vw, 72px); line-height: .88;
  color: var(--brand);
}
.section-head .meta {
  text-align: right; align-self: end;
}
.section-head .meta .eyebrow { color: var(--fg-2); }

/* ── Hero region (sits over 3D canvas) ────────────────────────────── */
.hero {
  position: relative;
  min-height: 75vh;
  padding-top: clamp(120px, 14vh, 180px);
  padding-bottom: clamp(64px, 8vh, 120px);
  display: flex; flex-direction: column; justify-content: center;
  z-index: var(--z-content);
}

/* ── 3D canvas: fixed behind everything in the hero ───────────────── */
#three-stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-3d);
  pointer-events: none;
  will-change: opacity;
}
#three-stage canvas { display: block; width: 100%; height: 100%; }

/* fallback paint while three loads */
#three-fallback {
  position: fixed; inset: 0; z-index: var(--z-3d);
  background:
    radial-gradient(60% 50% at 70% 35%, rgba(14,124,99,.10), transparent 70%),
    radial-gradient(50% 40% at 25% 65%, rgba(18,124,146,.08), transparent 70%),
    var(--bg-0);
  transition: opacity var(--d-cine) var(--ease-out);
}
#three-fallback.fade-out { opacity: 0; }