/* Utility container — per-section band fractions live HERE */
  .overlapSection { 
    container-name: overlap; 
    container-type: inline-size; 
  }

  .overlapStickAndScroll {
    --bandLeft: 1fr;
    /* defaults; override per section */
    --bandOverlap: 0fr;
    --bandRight: 1fr;
    --padding_lr: 1rem;
    --sticky-top-offset: 40px;
    /* px: top offset if you have a fixed header */

    display: grid;
    grid-template-columns: var(--bandLeft) var(--bandOverlap) var(--bandRight);
    gap: 0;
  }

  
  .overlapStickAndScroll.overlap03 {
    --bandOverlap: 0.3fr;
  }


  .overlapStickAndScroll.left1 {
    --bandLeft: 1fr;
  }

  .overlapStickAndScroll.left2 {
    --bandLeft: 2fr;
  }

  .overlapStickAndScroll.left3 {
    --bandLeft: 3fr;
  }


  .overlapStickAndScroll.right1 {
    --bandRight: 1fr;
  }

  .overlapStickAndScroll.right2 {
    --bandRight: 2fr;
  }

  .overlapStickAndScroll.right3 {
    --bandRight: 3fr;
  }

  .overlapStickAndScroll.noStick {
    --sticky-top-offset: -999999px;
  }


  .overlapStickAndScroll.stickAt0 {
    --sticky-top-offset: 0px;
    align-items: start;
  }

  .overlapStickAndScroll.stickAt10vh {
    --sticky-top-offset: 10vh;
    align-items: start;
  }

  .overlapStickAndScroll.stickAt15vh {
    --sticky-top-offset: 15vh;
    align-items: start;
  }


  /* Force overlap by sharing the same row */
  .overlapStickAndScroll .overlapLeft {
    grid-column: 1 / 3;
    grid-row: 1;
    /*padding-right: var(--padding_lr); */
  }

  .overlapStickAndScroll .overlapLeft.only {
    grid-column: 1 / 2;
  }


  .overlapStickAndScroll .overlapRight {
    grid-column: 2 / 4;
    grid-row: 1;
    /*padding-left: var(--padding_lr); */
  }



  /*.overlapStickAndScroll p { 
    margin: 0; 
    padding: 0; 
    max-width: var(--max-line); 
  }*/

  /* Persistent layering roles (stable even before sticky kicks in) */
  .willStick {
    position: relative;
    z-index: 3;
  }

  .willScroll {
    position: relative;
    z-index: 1;
  }

  /* Sticky only when active */
  .is-sticky {
    position: sticky;
    top: calc(var(--sticky-top-offset) + var(--header-h));
    z-index: 4;
  }

  /* === Auto-generated responsiveness review for: assets/css/stickAndScroll_overlap.css === */
  /* Breakpoint skeleton (fill in as needed) */
  @media (max-width: 1200px) {
    /* xl down */
  }

  @media (max-width: 992px) {
    /* lg down: stack sidebars, shrink grids */
  }

  @media (max-width: 768px) {

    /* md down: single-column layout */
  }


  @media (max-width: 576px) {
    /* sm down: tighten paddings, font sizes */
  }

  /* === End auto-generated review === */

  /* Make the component a size container so we can query its width */
  .overlapStickAndScroll {
    container-type: inline-size;
  }

  /* Disable sticky when the component is narrow (1-column mode) */
  @container overlap (max-width: 576px) {

    .overlapStickAndScroll [data-sticky],
    .overlapStickAndScroll .sticky,
    .overlapStickAndScroll .willStick,
    .overlapStickAndScroll .is-sticky,
    .overlapStickAndScroll .isSticky,
    .overlapStickAndScroll .overlapLeft,
    .overlapStickAndScroll .overlapRight {
      position: static !important;
      top: auto !important;
    }

    .overlapStickAndScroll {
      display: block !important;
      grid-template-columns: 1fr !important; /* ensure single column */
    }

    .overlapLeft,
    .overlapRight {
      grid-column: auto;
      grid-row: auto;
    }
  }

  /* === End: Container-query gating for sticky === */
/* Column-2 overlay: solid black on left -> transparent on right */
.overlapStickAndScroll .overlapCol2Overlay {
  grid-column: 2 / 3;
  grid-row: 1;
  position: relative;
  z-index: 2; /* above media (z=1), below sticky text (z=3) */
  pointer-events: none;
  align-self: stretch; /* fill the full row height even when align-items:start */
  background: linear-gradient(
    to right,
    var(--font-color)
    0%,
    transparent  100%
  );
}