/* About · "The hardest questions": the theme statement and its six questions, in the two grammars that survived
   the hero round. evosoft (H1/H3): fitted caps, one six-column grid, two-level entries.
   dc-dev (H7/H8): words stepping across the frame, a solid card beside them (never over them), corner meta.
   Readability first: nothing overlaps type. No motifs. (Q2, a bento of question tiles, was cut by Ahmed.) */

.q {
  --q-gap: var(--sp-stack-md);
  --q-cols: calc(var(--lay-gutter) - var(--q-gap)) repeat(6, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--q-gap));
  min-height: auto;
  padding-block: var(--space-section);
}

.q-grid {
  display: grid;
  grid-template-columns: var(--q-cols);
  column-gap: var(--q-gap);
}

.q__head {
  padding-inline: var(--lay-gutter);
}

.q__title {
  font-size: var(--fit, var(--type-poster));
  line-height: 0.9;
}

.q__title > span {
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.q__lede {
  font-size: var(--type-lead);
  line-height: var(--text-lead--line-height);
  text-wrap: pretty;
}

.q__num {
  display: block;
  margin-bottom: var(--sp-stack-xs);
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-variant-numeric: tabular-nums;
}

.q__item {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  text-wrap: balance;
}

.q__link {
  color: inherit;
  text-decoration-color: currentColor;
}

/* ================= Q1 · evosoft index, lapis ================= */
.q1 .q__title {
  color: var(--ink);
}

.q1__intro {
  row-gap: var(--sp-stack-md);
  margin-top: var(--sp-stack-lg);
}

.q1__intro .q__kicker {
  grid-column: 2 / 4;
  color: var(--loud);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
}

.q1__intro .q__lede {
  grid-column: 4 / 8;
  max-width: var(--ms-md);
  padding-top: var(--sp-optical);
}

/* The six questions are the payoff of the band: three to a row, each over two columns, at the title step's
   lower end, number set beside the question on its first line. */
.q1__list {
  row-gap: var(--sp-stack-lg);
  margin-top: calc(var(--sp-section) * 0.9);
}

.q1__list li {
  grid-column: span 2;
  display: grid;
  grid-template-columns: calc(var(--text-small) * 2.2) minmax(0, 1fr);
  align-items: baseline;
}

.q1__list li:nth-child(3n + 1) {
  grid-column: 2 / span 2;
}

.q1__list .q__num {
  margin-bottom: 0;
}

.q1__list .q__item {
  font-size: calc(var(--type-title) * 0.78);
  line-height: var(--text-h1--line-height);
}

/* ================= Q3 · dc-dev cascade beside a card, lapis ================= */
.q3__stage {
  display: grid;
  grid-template-columns: calc(var(--sp-section) * 3.3) minmax(0, 1fr);
  gap: var(--sp-stack-lg);
  width: min(100% - var(--lay-gutter) * 2, var(--lay-wide));
  margin-inline: auto;
  align-items: start;
}

/* The card runs the full height of the cascade: heading at the top, link at the foot, so it reads as the
   cascade's partner rather than a note pinned beside it. */
.q3__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-stack-md);
  align-self: stretch;
  padding: var(--sp-inset-lg);
  background: var(--background);
  color: var(--palette-lapis-blue);
}

.q3__card .q__link {
  margin-top: auto;
}

.q3__card h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
}

.q3__card p {
  font-size: var(--type-body);
  line-height: var(--text-body--line-height);
}

.q3__words {
  container-type: inline-size;
}

.q3__words ol {
  color: var(--ink);
  font-size: 8.1cqi;
  line-height: 0.96;
}

.q3__words li {
  width: fit-content;
  white-space: nowrap;
}

.q3__words li:nth-child(1) { margin-inline-start: 0%; }
.q3__words li:nth-child(2) { margin-inline-start: 10%; }
.q3__words li:nth-child(3) { margin-inline-start: 20%; }
.q3__words li:nth-child(4) { margin-inline-start: 8%; }
.q3__words li:nth-child(5) { margin-inline-start: 0%; }
.q3__words li:nth-child(6) { margin-inline-start: 13%; }

.q3__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-stack-md);
  width: min(100% - var(--lay-gutter) * 2, var(--lay-wide));
  margin: calc(var(--sp-section) * 0.7) auto 0;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--quiet);
}

.q3__meta b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: 1;
  color: var(--ink);
}

.q3__meta > :last-child {
  text-align: right;
}

/* ================= Q4 · editorial statement + numbered list, crimson ================= */
.q4__body {
  row-gap: var(--sp-stack-lg);
  align-items: start;
}

.q4__kicker {
  grid-column: 2 / 8;
  color: var(--loud);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
}

.q4__statement {
  grid-column: 2 / 6;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--text-h1--line-height);
  text-wrap: pretty;
}

.q4__link {
  grid-column: 2 / 6;
  grid-row: 3;
  align-self: end;
  width: fit-content;
  color: var(--quiet);
}

/* The list runs the statement's full height, first item on its first line, last on the link's line, numbers
   in their own narrow column so the questions share one left edge. */
.q4__list {
  grid-column: 6 / 8;
  grid-row: 2 / 4;
  display: grid;
  align-content: space-between;
  gap: var(--sp-stack-sm);
  align-self: stretch;
  padding-top: var(--sp-optical);
}

.q4__list li {
  display: grid;
  grid-template-columns: calc(var(--text-small) * 2.2) minmax(0, 1fr);
  align-items: baseline;
}

.q4__list .q__num {
  margin-bottom: 0;
}

.q4__list .q__item {
  font-size: calc(var(--type-heading) * 0.82);
  line-height: var(--text-h3--line-height);
}

/* ================= Q5 · the question wall, paper ================= */
.q5__intro {
  align-items: end;
  row-gap: var(--sp-stack-md);
  margin-bottom: var(--sp-stack-lg);
}

.q5__intro h2 {
  grid-column: 2 / 5;
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
}

.q5__intro .q__lede {
  grid-column: 5 / 8;
}

.q5__wall {
  padding-inline: var(--lay-gutter);
}

.q5__wall .q__title {
  display: grid;
  row-gap: var(--sp-stack-xs);
  line-height: 0.92;
}

.q5__wall .q__title > span {
  display: flex;
  align-items: baseline;
  gap: var(--sp-stack-md);
}

.q5__wall .q__title > span:nth-child(even) {
  margin-inline-start: auto;
}

.q5__outro {
  align-items: baseline;
  margin-top: var(--sp-stack-lg);
  font-size: var(--type-lead);
  line-height: var(--text-lead--line-height);
}

.q5__outro p {
  grid-column: 2 / 6;
}

.q5__outro a {
  grid-column: 6 / 8;
  justify-self: end;
}

.q5__wall small {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1;
  text-transform: none;
  font-feature-settings: normal;
}

/* ================= Narrow ================= */
@media (max-width: 1099px) {
  .q1__intro .q__kicker,
  .q1__intro .q__lede,
  .q4__kicker,
  .q4__statement,
  .q4__link,
  .q4__list,
  .q5__intro h2,
  .q5__intro .q__lede,
  .q5__outro p,
  .q5__outro a {
    grid-column: 2 / 8;
    grid-row: auto;
    justify-self: start;
  }

  .q4__link {
    order: 2;
  }

  .q1__list li:nth-child(n) {
    grid-column: span 1;
  }

  .q1__list .q__item {
    font-size: var(--type-heading);
  }

  .q1__list {
    grid-template-columns: calc(var(--lay-gutter) - var(--q-gap)) repeat(3, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--q-gap));
  }

  .q1__list li:nth-child(3n + 1) {
    grid-column: 2 / span 1;
  }

  .q3__stage {
    grid-template-columns: 1fr;
  }

  .q3__card {
    order: 2;
    max-width: var(--ms-sm);
  }
}

@media (max-width: 599px) {
  .q1__list {
    grid-template-columns: calc(var(--lay-gutter) - var(--q-gap)) repeat(2, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--q-gap));
  }

  /* One question per row: at two columns "development" is wider than its cell. */
  .q1__list li:nth-child(n) {
    grid-column: 2 / 4;
  }

  .q1__list {
    row-gap: var(--sp-stack-md);
  }

  .q3__words ol {
    font-size: 7.4cqi;
  }

  .q3__words li:nth-child(n) {
    margin-inline-start: 0;
  }

  .q5__wall .q__title > span:nth-child(even) {
    margin-inline-start: 0;
  }
}