/* ==========================================================================
   LAYOUT
   Content-agnostic page scaffolding: the generic "section" and "grid"
   patterns every page is assembled from, regardless of what components
   get placed inside them. Nothing here is a named, reusable UI piece —
   that belongs in components.css.
   ========================================================================== */

.section {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 112px) clamp(20px, 6vw, 76px);
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(90, 36, 120, 0.11) 50%, transparent 100%);
  pointer-events: none;
}

.section > * {
  position: relative;
  z-index: 1;
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  margin-bottom: 34px;
}

.section-grid p,
.intro > p,
.portfolio-copy p,
.contact p {
  font-size: 18px;
}

.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: start;
}

.welcome-grid p {
  color: var(--muted);
  font-size: 19px;
}

.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.65fr) minmax(320px, 1.35fr);
  gap: clamp(28px, 6vw, 78px);
  background:
    linear-gradient(135deg, rgba(90, 36, 120, 0.22), transparent 42%),
    #0d111a;
  color: var(--white);
}