/* Dominia — the 12-column lattice, enforced.
 *
 * The first critic pass called the grid "vaporware": --cols and --gutter were declared in
 * tokens.css and consumed by zero grid-template-columns rules, so every section hand-rolled
 * its own division and 47.7% of elements sat at a unique left edge (teenage.engineering: 14.6%).
 *
 * This file is the fix. Every section resolves to the same 12 columns with the same gutter,
 * so blocks share left edges down the whole page. Measured on the reference: 12 columns,
 * 8.16px gutter, 36.73px page margin.
 *
 * Loaded after the section files so it wins, and kept in one place so the lattice is auditable
 * rather than scattered.
 */

.nav__inner,
.why__inner,
.contest__inner,
.get__inner,
.footer__inner,
.how__steps {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-content: start;
}

/* ---- nav: mark | links | action ---- */
.nav__inner { align-items: center; row-gap: 0; }
.nav__mark  { grid-column: 1 / span 3; }
.nav__links { grid-column: 5 / span 6; margin-left: 0; justify-content: flex-end; }
.nav__cta   { grid-column: 11 / span 2; justify-self: end; }

/* ---- why play: the picture holds the left half, the copy a narrow column right ----
   Six and five, with column 7 left empty between them. A 5+7 split with no gutter column reads
   as two panes of one object; the empty column is what makes the paper between them a MARGIN,
   which is the whole point of putting this beat on a sheet. The copy is five rather than six for
   the reason .lede gives its own paragraph: a short stack beside a large picture reads as a
   caption on it, and at six columns the headline set two long lines instead of three short. */
.why__plate { grid-column: 1 / span 6; }
.why__copy  { grid-column: 8 / span 5; }

/* ---- contest: the readout left, the board right ----
   MIRRORED against .why above, and that is the reason for the widths rather than a preference.
   Section 003 puts its picture left and its copy right; if 004 did the same, the page would run
   two media panels down the same edge with two text columns beside them, and the pair would read
   as one component used twice. Reversed, they read as a spread.
   Five and six: the board needs the larger half here — it is carrying the whole argument that a
   contest happens on real ground — and the copy column is a list of short readings that sets
   comfortably in five. */
.contest__copy  { grid-column: 1 / span 5; }
.contest__plate { grid-column: 7 / span 6; }

/* ---- get: headline block, action block ---- */
.get__inner    { align-items: end; }
.get__inner > div:first-child { grid-column: 1 / span 7; }
.get__actions  { grid-column: 9 / span 4; }

/* ---- footer ---- */
.footer__inner { align-items: center; }
.footer__mark  { grid-column: 1 / span 3; }
.footer__links { grid-column: 4 / span 6; }
.footer__attr  { grid-column: 10 / span 3; margin-left: 0; justify-self: end; }

/* ---- how it works: the step column sits in the right half, on the lattice ---- */
.how__steps > .how__heading { grid-column: 1 / span 12; }
.how__steps > .step { grid-column: 7 / span 6; max-width: none; margin-left: 0; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .nav__mark   { grid-column: 1 / span 3; }
  .nav__links  { grid-column: 4 / span 5; }
  .nav__cta    { grid-column: 9 / span 4; }

  /* Both new sections stack. The picture goes FIRST in 003 because it already is first in the
     markup and it is the section's subject; the contest's board goes SECOND because its readout
     is the subject there and the board is the evidence for it — source order carries both, so
     neither needs an order override. */
  .why__plate,
  .why__copy,
  .contest__copy,
  .contest__plate { grid-column: 1 / span 12; }

  .get__inner > div:first-child { grid-column: 1 / span 12; }
  .get__actions { grid-column: 1 / span 12; }

  .footer__mark  { grid-column: 1 / span 12; }
  .footer__links { grid-column: 1 / span 12; }
  .footer__attr  { grid-column: 1 / span 12; justify-self: start; }

  .how__steps > .step { grid-column: 1 / span 12; }
}