/* Seamless continuation for the Axie-style paper chapter.
   The continuation artwork is kept in its ORIGINAL 3:4 aspect ratio. It is never
   stretched to the chapter box; instead it is oversized slightly left/right and
   cropped naturally. The continuation starts high behind the original artwork so
   the lower paper is already present from the marked guide line downward. */
@media (min-width:1001px){
  body.world-home main > .world-paper-chapter{
    padding-bottom:clamp(420px,24vw,520px)!important;
  }

  /* Keep the side overscan, but DO NOT force the source PNG into a guessed height.
     Give the pseudo-element extra vertical room and let the PNG keep its intrinsic
     aspect ratio. */
  body.world-home main > .world-paper-chapter::before{
    left:-4.25vw!important;
    right:auto!important;
    width:108.5vw!important;
    height:60vw!important;
    background-size:108.5vw auto!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    z-index:1!important;
  }

  body.world-home main > .world-paper-chapter::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:-2vw!important;
    right:auto!important;
    width:104vw!important;
    top:12.5vw!important;
    bottom:-5vw!important;
    background-image:url('./assets/world/paper-continuation.png?v=2')!important;
    background-repeat:no-repeat!important;
    background-size:100% auto!important;
    background-position:center -3vw!important;
    filter:brightness(1.046) hue-rotate(2deg) saturate(1.11)!important;
    pointer-events:none!important;
    z-index:0!important;
  }

  body.world-home main > .world-paper-chapter > *{
    position:relative!important;
    z-index:2!important;
  }

  /* Fresh 100% Chrome measurement, both screenshots 1917px wide:
     BabyT deepest central paper edge ~y503, heading starts ~y804 = ~301px gap.
     Axie  deepest central paper edge ~y282, heading starts ~y487 = ~205px gap.
     So the About content is still ~96px too low. 16vw at 1917px is ~307px,
     exactly ~96px less than the previous 21vw (~403px). Keep the paper artwork
     untouched and move the complete About content block upward by that measured
     amount so the edge-to-heading spacing matches Axie. */
  body.world-home main > .world-about{
    padding-top:clamp(290px,16vw,350px)!important;
  }
}

/* responsive-parity.css intentionally replaces the desktop wave geometry below
   1120px. Keep that layout, but restore the same continuation artwork underneath
   it so the yellow paper does not end early and expose the navy About background.
   The duplicated class raises specificity above the later responsive override
   without changing any spacing or section dimensions. */
@media (max-width:1120px){
  body.world-home main > .world-paper-chapter.world-paper-chapter::before{
    z-index:1!important;
  }
  body.world-home main > .world-paper-chapter.world-paper-chapter::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:-4.25vw!important;
    right:auto!important;
    width:108.5vw!important;
    top:max(90px,12.5vw)!important;
    bottom:-5vw!important;
    transform:none!important;
    background-image:url('./assets/world/paper-continuation.png?v=2')!important;
    background-repeat:no-repeat!important;
    background-size:100% auto!important;
    background-position:center -3vw!important;
    filter:brightness(1.046) hue-rotate(2deg) saturate(1.11)!important;
    pointer-events:none!important;
    z-index:0!important;
  }
}

/* On phone widths the chapter becomes much taller relative to its width. Use
   cover only for this continuation layer so the original 3:4 image keeps its
   proportions while reaching the lower paper edge; horizontal excess is cropped. */
@media (max-width:760px){
  body.world-home main > .world-paper-chapter.world-paper-chapter::after{
    left:0!important;
    width:100%!important;
    top:90px!important;
    bottom:-5vw!important;
    background-size:cover!important;
    background-position:center top!important;
  }
}