/* SCENE 20 — WHAT WE ARE BUILDING NEXT: the status board on ink with
   an ink→bone gradient close inside the scene. Static-first: the plain
   headline, all rows, pills and fully drawn maturity lines render by
   default; the scene JS hides and scrubs only in the motion branch. */

.s20 { padding-block: 150px 0; }

.s20-h2 {
  font-size: clamp(1.7rem, 3.3vw, 2.9rem);
  max-width: 30ch;
}

/* headline → board: layer rhythm (grid law, min 96px) */
.s20-board {
  margin-top: var(--rhythm-layer);
  max-width: 980px;
}

.s20-row__link {
  display: block;
  padding-block: 30px 0;
  transition: padding-left .35s var(--ease);
}
.s20-row__link:hover { padding-left: 16px; }

.s20-row__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.s20-row__name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  transition: color .3s var(--ease);
}
.s20-row__link:hover .s20-row__name { color: var(--gold); }

/* the maturity survey line: hairline track across the full row, a
   gradient fill whose width IS the statement (set per row by JS) */
.s20-row__line {
  position: relative;
  display: block;
  height: 1px;
  margin-top: 22px;
}
.s20-row__track {
  position: absolute;
  inset: 0;
  background: var(--hair);
}
.s20-row__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--grad);
  transform-origin: left center;
}

/* the ink→bone gradient close: a tall, empty exhale ending the scene */
.s20-close {
  margin-top: 140px;
  height: 44vh;
  background: linear-gradient(180deg, var(--ink) 0%, var(--bone) 100%);
}

@media (max-width: 719px) {
  .s20 { padding-block: 110px 0; }
  .s20-board { margin-top: 80px; }
  .s20-row__link { padding-block: 24px 0; }
  .s20-row__line { margin-top: 18px; }
  .s20-close { margin-top: 96px; height: 32vh; }
}