/* ═══════════════════════════════════════════════════════════════════════════
   assembl · the page rhythm
   ───────────────────────────────────────────────────────────────────────────
   Kate, 1 August 2026: "i want the whole page to be a journey of assembled
   motion with the relevant per concept page still there."

   The stage alone was a moment in an otherwise flat document. This makes the
   WHOLE page behave the way the lab does — every section a held breath rather
   than a stacked card — without touching a single word of the page's own copy.

   HOW IT WORKS
   A section is a moment. It gets height, air, a hairline that separates it
   from the next, and a heading set at display scale. The page's own colours,
   components and content are untouched: this is rhythm and scale only, which
   is why it can be applied to eighteen differently-built pages at once.

   THE ONE RULE
   Nothing here adds an element. If a page looks busier after this file, the
   file is wrong.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. every section is a moment, with room to be one ──────────────────── */
body[data-ab-rhythm] > main > section,
body[data-ab-rhythm] > section,
body[data-ab-rhythm] > main > div > section {
  padding-top: clamp(72px, 13vh, 168px);
  padding-bottom: clamp(72px, 13vh, 168px);
  position: relative;
}

/* the hairline between moments — Swiss structure, one line per idea */
body[data-ab-rhythm] > main > section + section::before,
body[data-ab-rhythm] > section + section::before {
  content: "";
  position: absolute;
  left: clamp(22px, 5vw, 64px);
  right: clamp(22px, 5vw, 64px);
  top: 0;
  height: 1px;
  background: currentColor;
  opacity: .10;
}
/* the assembly stage and the evidence band carry their own edges */
body[data-ab-rhythm] .abStage::before,
body[data-ab-rhythm] .abEv::before,
body[data-ab-rhythm] .abStage + section::before,
body[data-ab-rhythm] .abEv + section::before { display: none }
body[data-ab-rhythm] .abStage,
body[data-ab-rhythm] .abEv,
body[data-ab-rhythm] .abMosBand { padding-top: 0; padding-bottom: 0 }
body[data-ab-rhythm] .abEv { padding: clamp(70px,13vh,150px) clamp(22px,5vw,64px) }
body[data-ab-rhythm] .abMosBand { padding: clamp(40px,7vh,92px) clamp(22px,5vw,64px) }

/* ── 2. section headings at display scale ───────────────────────────────── */
body[data-ab-rhythm] h2 {
  font-size: clamp(30px, 5vw, 68px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.022em !important;
  max-width: 17ch;
}
body[data-ab-rhythm] h3 {
  font-size: clamp(19px, 2.1vw, 27px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.012em !important;
}
/* the lede under a display heading gets room to breathe with it */
body[data-ab-rhythm] h2 + p,
body[data-ab-rhythm] h2 + .lede,
body[data-ab-rhythm] h2 + .secS {
  margin-top: clamp(18px, 2.4vh, 30px) !important;
  font-size: clamp(16px, 1.5vw, 19px) !important;
  line-height: 1.6 !important;
  max-width: 52ch;
}

/* ── 3. the folio — a section's own number, set as an editorial mark ────── */
body[data-ab-rhythm] .kicker:first-child,
body[data-ab-rhythm] .secK,
body[data-ab-rhythm] .eyebrow {
  letter-spacing: .26em !important;
  text-transform: uppercase;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* ── 4. the sequence: a section's contents arrive in order, not at once ──
   The motion engine already staggers what it is given; this makes the DELAY
   proportional to reading order so a section unfolds rather than pops. */
body[data-ab-rhythm] [data-m="rise"]:nth-of-type(2) { transition-delay: .07s }
body[data-ab-rhythm] [data-m="rise"]:nth-of-type(3) { transition-delay: .14s }
body[data-ab-rhythm] [data-m="rise"]:nth-of-type(4) { transition-delay: .21s }
body[data-ab-rhythm] [data-m="rise"]:nth-of-type(n+5) { transition-delay: .28s }

/* ── 5. the moments that hold a device or a canvas get the lab's stage ──── */
body[data-ab-rhythm] .waitgrid,
body[data-ab-rhythm] .dkStage,
body[data-ab-rhythm] .wpWrap,
body[data-ab-rhythm] .machine {
  margin-top: clamp(34px, 5vh, 66px);
}

/* ── 6. mobile keeps the rhythm but loses the extremes ──────────────────── */
@media (max-width: 720px) {
  body[data-ab-rhythm] > main > section,
  body[data-ab-rhythm] > section { padding-top: 64px; padding-bottom: 64px }
  body[data-ab-rhythm] h2 { font-size: clamp(27px, 7.6vw, 38px) !important; max-width: none }
}

/* ── 7. reduced motion keeps every bit of the rhythm, none of the movement ─ */
@media (prefers-reduced-motion: reduce) {
  body[data-ab-rhythm] [data-m="rise"] { transition-delay: 0s !important }
}