/* ═══════════════════════════════════════════
   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;
  background:
    radial-gradient(ellipse 80% 65% at 100% 0%, hsla(40, 95%, 70%, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 0% 100%, hsla(78, 55%, 58%, 0.16) 0%, transparent 60%);
}

.section--tight {
  padding: calc(var(--section-padding) * 0.6) 0;
}

.section--alt {
  background:
    radial-gradient(ellipse 80% 65% at 0% 0%, hsla(40, 95%, 70%, 0.40) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 100% 100%, hsla(36, 80%, 60%, 0.28) 0%, transparent 60%);
}
.section--warm { background: var(--bojin-50); }
.section--dark {
  background: var(--forest-500);
  color: var(--color-text-invert);
}
.section--deep {
  background: var(--forest-600);
  color: var(--color-text-invert);
}

.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);
}

/* ═══════════════════════════════════════════
   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; }

/* Asymmetric split (hero / feature) */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

.split--7-5 > :first-child { order: 2; }
.split--7-5 > :last-child  { order: 1; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  .split--7-5 {
    grid-template-columns: 7fr 5fr;
  }
  .split--7-5 > :first-child { order: 1; }
  .split--7-5 > :last-child  { order: 2; }
  .split--5-7 { grid-template-columns: 5fr 7fr; }
}

/* ═══════════════════════════════════════════
   STACK (vertical rhythm helper)
   ═══════════════════════════════════════════ */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-md > * + * { margin-top: var(--space-6); }
.stack-lg > * + * { margin-top: var(--space-10); }

.flex {
  display: flex;
  gap: var(--space-4);
}
.flex--center { align-items: center; justify-content: center; }
.flex--wrap { flex-wrap: wrap; }
.flex--between { justify-content: space-between; align-items: center; }

/* ═══════════════════════════════════════════
   TEXTURES — grain overlay
   ═══════════════════════════════════════════ */
.grain,
.grain-light {
  position: relative;
}
.grain::after,
.grain-light::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  mix-blend-mode: multiply;
  z-index: 1;
}
.grain::after       { opacity: 0.06; }
.grain-light::after { opacity: 0.03; }

.section--dark.grain::after,
.section--deep.grain::after {
  mix-blend-mode: overlay;
  opacity: 0.08;
}

.grain > * { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════
   ORGANIC SHAPE DIVIDERS
   ═══════════════════════════════════════════ */
.arc-divider {
  position: relative;
}
.arc-divider::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4rem;
  background: inherit;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(50%);
}

/* ═══════════════════════════════════════════
   SKIP LINK
   ═══════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--forest-500);
  color: var(--cream-0);
  z-index: var(--z-max);
  border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--space-4); }