/* ============================================================
   DivineADU — "Watch a garden suite take shape" scroll sequence.
   Classes prefixed bs-. Static (finished drawing + full list) by
   default; .bs-js on <html> enables the sticky scroll version.
   ============================================================ */
.bs-section { background: var(--ink); color: var(--bone); position: relative; }
.bs-header {
  max-width: var(--container); margin: 0 auto;
  padding: var(--section-pad) clamp(1.25rem, 4vw, 2.5rem) 1rem;
}
.bs-header .lede { margin-top: 1rem; }

.bs-stage { max-width: var(--container); margin: 0 auto; padding: 2rem clamp(1.25rem, 4vw, 2.5rem) var(--section-pad); }
.bs-stage-inner { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.bs-figure { min-width: 0; }
.bs-drawing { width: 100%; height: auto; display: block; overflow: visible; }
.bs-drawing text { font-family: var(--font-sans); letter-spacing: 0.02em; }
.bs-drawing line, .bs-drawing polyline, .bs-drawing polygon, .bs-drawing path,
.bs-drawing rect, .bs-drawing circle, .bs-drawing ellipse { vector-effect: non-scaling-stroke; }

/* Captions: static list by default */
.bs-caption-list { list-style: none; margin: 0; padding: 0; }
.bs-caption { padding: 1.1rem 0; border-top: 1px solid rgba(244,242,238,0.12); }
.bs-caption-num { display: block; font-family: var(--font-serif); font-size: 1rem; color: var(--gold-soft); margin-bottom: 0.3rem; font-variant-numeric: tabular-nums; }
.bs-caption-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: -0.015em; color: var(--bone); margin: 0 0 0.5rem; }
.bs-caption-text { font-size: 0.98rem; line-height: 1.6; color: rgba(244,242,238,0.74); margin: 0; max-width: 34ch; }
.bs-rail { display: none; }
.bs-more { margin-top: 1.6rem; }

/* ---------- Scroll-driven mode ---------- */
.bs-js .bs-runway { height: 480vh; position: relative; }
.bs-js .bs-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 76px; padding-bottom: 2rem; }
.bs-js .bs-stage-inner { width: 100%; }
.bs-js .bs-caption-list { position: relative; min-height: 12rem; }
.bs-js .bs-caption { position: absolute; inset: 0 0 auto 0; border-top: 0; padding: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.bs-js .bs-caption.bs-active { opacity: 1; transform: none; }
.bs-js .bs-caption-num { font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; margin-bottom: 0.7rem; }
.bs-js .bs-rail { display: flex; gap: 6px; margin-top: 1.2rem; }
.bs-tick { flex: 0 0 34px; height: 2px; background: rgba(244,242,238,0.18); transition: background 0.3s ease; }
.bs-tick.bs-active { background: var(--gold-soft); }

@media (max-width: 820px) {
  .bs-stage-inner { grid-template-columns: 1fr; gap: 1.2rem; }
  .bs-js .bs-runway { height: 420vh; }
  .bs-js .bs-stage { padding-top: 84px; align-items: center; }
  .bs-js .bs-caption-list { min-height: 9.5rem; }
  .bs-js .bs-caption-num { font-size: 2.2rem; margin-bottom: 0.4rem; }
  .bs-caption-title { font-size: 1.35rem; }
  .bs-caption-text { font-size: 0.92rem; }
  .bs-more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-js .bs-runway { height: auto; }
  .bs-js .bs-stage { position: static; height: auto; }
  .bs-js .bs-caption { position: static; opacity: 1; transform: none; transition: none; padding: 1.1rem 0; border-top: 1px solid rgba(244,242,238,0.12); }
  .bs-js .bs-rail { display: none; }
}