/* Lagos Life · section spacing rhythm (9 Oct 2026, client: "too much empty space between sections"). Loaded last.
   One rhythm, measured from the last visible content of a section to the first visible content of the next:
   - a full-bleed colour change (paper / cotton / night) is the divider itself: each side keeps --edge of inner padding
     (64px desktop, 48px phone).
   - two sections on the same colour (owambe → beyond, B3 → B4 → B5): about 104px desktop / 64px phone in total.
   - kept as the client set them: P5 → Run Lagos film (40px, phone.css), B5 → B6 (b5.css). The films' own scroll
     lengths are untouched; only the dead padding around them is trimmed.
   Two ids per selector, so these win over the sections' own #id rules without !important. */
:root { --edge: 64px; --same: 52px; }
@media (max-width: 600px) { :root { --edge: 48px; --same: 32px; } }

/* ---------- Players ---------- */
#side-play > #spin { padding-top: var(--edge); padding-bottom: var(--edge); }          /* sky → cotton → paper */
#side-play > #city { padding-top: var(--edge); padding-bottom: var(--edge); }          /* paper between two cotton bands */
#side-play > #climb { padding-top: var(--edge); padding-bottom: var(--edge); }         /* cotton */
#side-play > #phone { padding-top: var(--edge); }                                       /* bottom stays 40px: the gold film follows (client) */
#side-play > #owambe { padding-top: calc(var(--edge) + 32px); padding-bottom: var(--same); }   /* night → paper; the tilted OWAMBE! sits ~30px inside its box */
#side-play > #beyond { padding-top: var(--same); padding-bottom: var(--edge); }        /* same paper as owambe, then cotton */
#side-play > #crowd { padding-top: var(--edge); padding-bottom: calc(var(--edge) - 8px); }     /* cotton → night finale */

/* ---------- Brands ---------- */
#side-advertise > .why { padding-top: var(--edge); padding-bottom: var(--edge); }      /* sky → cotton → paper */
#side-advertise > #placements { padding-top: var(--edge); padding-bottom: var(--same); }
#side-advertise > #preview { padding-top: var(--same); padding-bottom: var(--same); }
#side-advertise > #steps { padding-top: var(--same); }                                  /* bottom: client-tightened into B6 (b5.css) */
#side-advertise > .inside { padding-bottom: calc(var(--edge) - 14px); }                 /* the label rows' shadow sits ~14px below them */
#side-advertise > .results { padding-top: var(--edge); padding-bottom: var(--edge); }
#side-advertise > #faq { padding-top: var(--edge); padding-bottom: var(--edge); }       /* cotton → B9 night */

/* ---------- inside sections, phones (client, 9 Oct: "big empty gaps inside sections") ---------- */
@media (max-width: 600px) {
  /* P2: the booth sat 56px under the lede (109px of air with the header margin) */
  #side-play > #spin .machine { margin-top: 32px; }
  /* P9: on phones the parcel waits until 75% of the stamp wall is on screen (crowd.js, so it lands mid-screen), which
     left ~420px of blank cotton while you scroll in. The six stamps now wait there as faint ghosts instead of nothing;
     crowd.js hides them (opacity 0) the moment the parcel starts to drop, so the delivery is unchanged. */
  #crowd .cr-stage.is-pre .cr-stamp { opacity: .22; }
}