/* S11 — GRMH CONSTRUCTIONS (ink venture chapter).
   Seven scope items as ruled rows drawing in sequence. CSS defaults
   keep every rule drawn and every row fully visible — motion mode
   alone sets hidden states (reduced-motion law). */

.s11 { padding-block: 150px; }

.s11-titlerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.s11-name { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

.s11-h2 {
  margin-top: var(--rhythm-layer);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
}

/* ---------- the scope: ruled rows ---------- */

.s11-scope {
  margin-top: var(--rhythm-layer);
  max-width: 780px;
}

.s11-row {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: 24px 26px;
}

.s11-row-rule {
  position: absolute;
  top: 0;
  left: 0;
}

.s11-row-index {
  font-size: .66rem;
  font-weight: 300;
  letter-spacing: .3em;
  color: color-mix(in srgb, var(--gold) 75%, transparent);
}

.s11-row-item {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.2;
}

.s11-cta { margin-top: 72px; }

@media (max-width: 899px) {
  .s11 { padding-block: 96px; }
  .s11-row {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding-block: 20px 22px;
  }
  .s11-cta { margin-top: 56px; }
}