/* ── Layout grid — siarheimardovich.com v2 ── */
/* Owner change list item 4: a documented 12-column grid, 8px baseline, 24px gutters,
   72rem container, 65–68ch prose measure.
   0814_3 repair of the 0815 grid. Defect D3: the only media query was min-width:1200px, so
   .col-4 stayed 3-across at 375px (93px columns of body copy), and the content column had no
   horizontal padding. This file is mobile-first: 1 column, then 2 at 640px, then the real
   12-column grid at 900px. Column spans exist only where there are 12 columns to span. */

/* ── Container: the single owner of max-width and horizontal gutters ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Prose measure — 65–68ch ── */
.measure { max-width: var(--measure); }
.measure-narrow { max-width: 52ch; }

/* ── The grid ── */
.grid-12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32) var(--gutter);
}

@media (min-width: 640px) {
  .grid-12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-12, .col-full { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-1  { grid-column: span 1; }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12, .col-full { grid-column: 1 / -1; }
  /* start-column utilities, for deliberately asymmetric sections */
  .start-2 { grid-column-start: 2; }
  .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; }
  .start-6 { grid-column-start: 6; }
}

/* ── Baseline rhythm — 8px ladder ── */
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: var(--space-40); }
.mt-48 { margin-top: var(--space-48); }
.mt-64 { margin-top: var(--space-64); }

.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-40 { margin-bottom: var(--space-40); }
.mb-48 { margin-bottom: var(--space-48); }
.mb-64 { margin-bottom: var(--space-64); }

/* ── Vertical stack helper (preferred over per-element margins) ── */
.stack > * + * { margin-top: var(--space-16); }
.stack-tight > * + * { margin-top: var(--space-8); }
.stack-loose > * + * { margin-top: var(--space-24); }