/* ==========================================================================
   section.css — shared section furniture
   Sections 2-8 all sit on the page gradient (only the hero carries its own
   background), and they share a heading/body/divider vocabulary. Defining it
   once here keeps each section file down to its own geometry.
   ========================================================================== */

.section {
  position: relative;
  text-align: center;
  /* Required. Without a stacking context here, .section__art's z-index:-1
     resolves against the root, where negative-z children paint BEFORE body's
     background — so the artwork renders behind the page gradient and vanishes. */
  isolation: isolate;
  /* Artwork is sized to end inside its own section, but clip anyway: without
     this, section 4's hand overflowed 45px into section 5. */
  overflow: hidden;
}

/* Heights tile bg_gradient.webp exactly — they must sum to 3926 or the
   background drifts out of register with the content. */
.section--initiative { min-height: calc(535 * var(--u)); }
.section--counter    { min-height: calc(648 * var(--u)); }
.section--unclear    { min-height: calc(489 * var(--u)); }
.section--provided   { min-height: calc(496 * var(--u)); }
.section--under18    { min-height: calc(177 * var(--u)); }
.section--next       { min-height: calc(548 * var(--u)); }
.section--close      { min-height: calc(447 * var(--u)); }

/* --- Headings --------------------------------------------------------- */

.section__title {
  font-size: calc(var(--fs-h2) * var(--u));
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
}

.section__title--sm {
  font-size: calc(var(--fs-h3) * var(--u));
}

/* --- Copy -------------------------------------------------------------- */

.section__body {
  font-size: calc(var(--fs-body) * var(--u));
  line-height: var(--lh-body);
}

.section__body + .section__body {
  margin-top: calc(16 * var(--u));
}

.section__sub {
  /* Subheads sit on a ~300px measure, not the full 353px container. Section 5's
     "We check the date of birth carefully." is 346px on one line and would not
     wrap at 353 — the design breaks it after "birth", which fixes the measure. */
  max-width: calc(300 * var(--u));
  margin-inline: auto;
  font-size: calc(var(--fs-sub) * var(--u));
  line-height: var(--lh-sub);
}

/* --- Divider ----------------------------------------------------------- */
/* A hairline that fades out at both ends. Measured at 137px wide, centred,
   on sections 4 and 5. */

.section__rule {
  width: calc(137 * var(--u));
  height: calc(2 * var(--u));
  margin-inline: auto;
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(
    90deg,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / 0.75) 50%,
    rgb(255 255 255 / 0) 100%
  );
}

/* --- Section artwork ---------------------------------------------------- */
/* Each section's asset is absolutely placed from measured values, so it can
   overlap the section's padding without affecting the flow. */

.section__art {
  position: absolute;
  /* Anchored to the frame's centre, not its left edge. Above 393px --u locks
     at 1px, so a left-based offset stays put while the frame keeps growing and
     the artwork drifts left. Each section supplies its own translateX, which
     carries the design's intentional off-centre nudge. */
  left: 50%;
  z-index: -1;
  max-width: none;
  pointer-events: none;
}