/* ============================================================
   SPACING & LAYOUT
   Every section is 100vh with generous internal padding.
   Hairline rules over boxes; lots of negative space.
   ============================================================ */

:root {
  /* --- Spacing scale (rem) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Section rhythm --- */
  --section-min-h: 100dvh; /* @kind spacing */
  --section-pad-y: clamp(3rem, 8vh, 7rem);
  --section-pad-x: clamp(1.25rem, 5vw, 4rem);

  /* --- Content widths --- */
  --content-max: 72rem;    /* max text/content column */
  --measure: 40rem;        /* readable prose measure */
  --band-max: 90rem;       /* wide data bands */

  /* --- Radii (restrained; hairlines preferred over boxes) --- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Border widths --- */
  --hairline: 1px;
  --rule: 1px solid var(--border);
}

/* --- Layout helpers --- */
.ds-section {
  min-height: var(--section-min-h);
  padding: var(--section-pad-y) var(--section-pad-x);
  box-sizing: border-box;
}
.ds-content {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}
.ds-band {
  max-width: var(--band-max);
  margin-inline: auto;
  width: 100%;
}