/* Chakra Serenity — layout primitives. Structure only, no decoration. */

.cs-wrap {
  width: 100%;
  max-width: var(--cs-wrap);
  margin-inline: auto;
  padding-inline: var(--cs-gutter);
}

.cs-wrap-narrow {
  width: 100%;
  max-width: var(--cs-wrap-narrow);
  margin-inline: auto;
  padding-inline: var(--cs-gutter);
}

.cs-section    { padding-block: var(--cs-s8); }
.cs-section-sm { padding-block: var(--cs-s7); }

/* Alternating band, so a long home page has rhythm instead of one flat field. */
.cs-band-alt { background: var(--cs-bg-deep); }

/* Skip link — visible only on focus. */
.cs-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: var(--cs-s3) var(--cs-s5);
  background: var(--cs-accent); color: var(--cs-on-accent);
  border-radius: 0 0 var(--cs-radius-sm) 0;
}
.cs-skip:focus { left: 0; }

/* ---------- Article ----------
   Single column, centred, no sidebar. The measure is capped at 740px so line
   length never grows with the viewport — the mistake that makes long-form
   unreadable on a wide monitor. Related posts sit below the article. */
.cs-article {
  width: 100%;
  max-width: var(--cs-wrap-narrow);
  margin-inline: auto;
  padding-inline: var(--cs-gutter);
  padding-block: var(--cs-s7) var(--cs-s8);
}

/* Full-bleed escape for figures and tables inside the narrow column. */
.cs-bleed {
  width: min(100vw - 2rem, 62rem);
  margin-inline: calc(50% - min(50vw - 1rem, 31rem));
}

/* ---------- Grids ---------- */
.cs-grid {
  display: grid; gap: var(--cs-s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.cs-grid-2 {
  display: grid; gap: var(--cs-s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr));
}

.cs-stack    > * + * { margin-top: var(--cs-s4); }
.cs-stack-lg > * + * { margin-top: var(--cs-s6); }

.cs-cluster {
  display: flex; flex-wrap: wrap;
  gap: var(--cs-s2) var(--cs-s4);
  align-items: center;
}