/* ============================================================
   LUMARKEN — spacing.css
   Semantic, fluid spacing. Section rhythm lives here.
   ============================================================ */

:root {
  --space-3xs: var(--raw-size-2xs);
  --space-2xs: var(--raw-size-xs);
  --space-xs:  var(--raw-size-s);
  --space-s:   var(--raw-size-m);
  --space-m:   var(--raw-size-l);
  --space-l:   var(--raw-size-xl);
  --space-xl:  var(--raw-size-2xl);
  --space-2xl: var(--raw-size-3xl);

  /* Section vertical rhythm */
  --section-pad: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --section-gap-head: clamp(2.5rem, 2rem + 3vw, 5rem);

  /* Grid gutters */
  --gutter: clamp(1.25rem, 1rem + 1.6vw, 2.5rem);
  --gutter-wide: clamp(2rem, 1.5rem + 3vw, 4.5rem);
}

/* --- Layout utilities --- */
.container {
  width: 100%;
  max-width: var(--raw-container-max);
  margin-inline: auto;
  padding-inline: var(--raw-container-pad);
}

.section {
  padding-block: var(--section-pad);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-bottom: var(--section-gap-head);
  max-width: 56rem;
}

.flow > * + * { margin-top: var(--space-s); }