/* ===== Shell ===== */

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ===== Container & Grid ===== */

.container {
  width: min(1200px, 90vw);
  margin: 0 auto;
}

.container-wide {
  width: min(1400px, 92vw);
  margin: 0 auto;
}

/* ===== Sections with alternating backgrounds ===== */

.section {
  padding: var(--space-section) 0;
  position: relative;
}

.section-sm {
  padding: var(--space-section-sm) 0;
}

.section-tight {
  padding: 48px 0;
}

/* Dark sections */
.section-dark {
  background: var(--bg-dark);
  color: hsl(210 40% 92%);
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #ffffff;
}

.section-dark p,
.section-dark .page-subtitle {
  color: hsl(215 30% 70%);
}

.section-dark .section-label {
  color: hsl(210 100% 72%);
}

/* Tinted sections */
.section-tinted {
  background: var(--bg-tinted);
}

/* Warm sections */
.section-warm {
  background: var(--bg-warm);
}

/* ===== Grid ===== */

.grid {
  display: grid;
  gap: 28px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ===== Typography & Spacing ===== */

.page-title {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.page-subtitle {
  max-width: 60ch;
  color: var(--muted-foreground);
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 400;
}

.section-label {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 20px;
}

.section-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.section-desc {
  max-width: 60ch;
  color: var(--muted-foreground);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 48px;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-header .section-desc {
  margin-left: auto;
  margin-right: auto;
}

/* ===== Split Layout ===== */

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.split-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* ===== Stack Helpers ===== */

.stack-8 > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-32 > * + * { margin-top: 32px; }
.stack-48 > * + * { margin-top: 48px; }

/* ===== Alignment ===== */

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-prose { max-width: 65ch; }

/* ===== Shape Dividers ===== */

.divider-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  overflow: hidden;
}

.divider-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}