/* Container, bands, section rhythm, grids */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section       { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.section--top  { padding-top: var(--sec-y-top); padding-bottom: var(--gap-stack); }
.section--head { padding-top: var(--sec-y-top); padding-bottom: var(--sec-y); }
.section--tail { padding-top: 0; padding-bottom: var(--sec-y); }

.band--ink    { background: var(--c-ink); color: var(--c-paper); }
.band--paper2 { background: var(--c-paper-2); }

.stack      { display: flex; flex-direction: column; gap: var(--s-8); }
.stack--sm  { gap: var(--s-4); }
.stack--lg  { gap: var(--s-11); }
.stack--sec { gap: var(--gap-stack); }
.row        { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.row--between { justify-content: space-between; align-items: flex-end; gap: var(--s-11); }

/* Editorial two-column: heading left, copy right */
.cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--gap-col);
  align-items: start;
}
.cols-2--center { align-items: center; }
.cols-2--end    { align-items: end; }
.cols-2--narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.cols-2--form   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.col-offset-top { padding-top: clamp(0px, 1vw, 14px); }

/* Card grids */
.grid-cards   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-7); }
.grid-tiles   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-6); }
.grid-wide    { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-6); }
.grid-notes   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-6); }
.grid-steps   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.grid-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-6); }
.text-limit   { max-width: 720px; }
.text-limit--wide { max-width: 1000px; }
.measure-48   { max-width: 48ch; }
.measure-52   { max-width: 52ch; }
.measure-60   { max-width: 60ch; }
.measure-70   { max-width: 70ch; }