/* SCENE 16 — WHY PARTNER (bone). A held headline frame, then eight
   expandable ruled rows; index numerals fill with the gradient while
   a row is active. Static mode (no .s16--interactive) renders every
   row open and every numeral filled. */

.s16 { padding-block: 150px 140px; }

.s16-head {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s16-h2 {
  font-size: clamp(1.9rem, 3.9vw, 3.4rem);
  max-width: 24ch;
}

.s16-body { margin-top: var(--rhythm-layer); }

.s16-row__head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: 28px 0 24px;
}
.s16-row__head:focus-visible {
  outline: 1px solid var(--earth);
  outline-offset: 6px;
}
/* static mode: rows are open and not interactive */
.s16:not(.s16--interactive) .s16-row__head { cursor: default; }

.s16-row__num {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1;
}
.s16-row__num-quiet {
  color: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: opacity .5s var(--ease);
}
.s16-row__num-fill {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity .5s var(--ease);
}

.s16-row__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  line-height: 1.18;
}

.s16-row__detail-inner { overflow: hidden; }
.s16-row__line {
  max-width: 62ch;
  padding-bottom: 30px;
  margin-left: calc(76px + var(--gutter));
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* interactive mode (added by JS only when motion is allowed): rows
   collapse and breathe open on hover/tap; the numeral fills with the
   gradient only while its row is active */
.s16--interactive .s16-row__detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .7s var(--ease), opacity .45s var(--ease);
}
.s16--interactive .s16-row.is-open .s16-row__detail {
  grid-template-rows: 1fr;
  opacity: 1;
}
.s16--interactive .s16-row__num-fill { opacity: 0; }
.s16--interactive .s16-row.is-open .s16-row__num-fill { opacity: 1; }
.s16--interactive .s16-row.is-open .s16-row__num-quiet { opacity: 0; }

@media (max-width: 899px) {
  .s16 { padding-block: 104px 96px; }
  .s16-head { min-height: 40vh; }
  .s16-row__head {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 22px 0 18px;
  }
  .s16-row__line { margin-left: calc(48px + var(--gutter)); }
}

@media (max-width: 599px) {
  .s16-row__line { margin-left: 0; }
}