/* EL-STAIR — lede-spec-pair layout.
   Used only by /stair. Lede and spec sit side-by-side on desktop:
   the measurement register in direct confrontation with the prose,
   because the stair's argument is that document and object had to
   match exactly. On mobile they stack, lede first.

   The component replaces the default el-lede + el-spec sections with
   a single section containing both panels. */

.el-lede-spec {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--sp-xl) var(--gutter) 0;
  display: grid;
  gap: var(--sp-xl) var(--sp-2xl);
  align-items: start;
}

/* Lede — same type treatment as the default el-lede, but inside the pair. */
.el-lede-spec__lede p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: 1.45;
  color: var(--ink);
  max-width: 34ch;
  letter-spacing: -.004em;
}

/* Spec panel — same hairline register as el-spec, but pulled up to sit
   beside the lede rather than below it. The rule starts at the top of the
   panel so it aligns with the lede's first baseline. */
.el-lede-spec__spec {
  border-top: 1px solid var(--ink);
}

.el-lede-spec__spec dl {
  margin: 0;
}

.el-lede-spec__spec > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--paper-3);
}

.el-lede-spec__spec dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

.el-lede-spec__spec dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  max-width: 40ch;
}

.el-lede-spec__spec .el-spec__note {
  margin-top: var(--sp-md);
  font-size: var(--text-caption);
  color: var(--muted);
  max-width: 40ch;
}

/* Two-column on wide screens — lede left, spec right.
   The columns are weighted so the lede has room to breathe at display
   size and the spec does not feel squeezed. */
@media (min-width: 56rem) {
  .el-lede-spec {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  }

  .el-lede-spec__spec > div {
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
    gap: var(--sp-md);
    align-items: baseline;
  }
}