/* ============================================================================
   SECTION FOUR — the forest
   ----------------------------------------------------------------------------
   Artboard 1930.6 x 1626.4, no bleed either side, so the artboard is the art
   column and the ratio is 1626.4 / 1930.6.
   ========================================================================= */

.sec4{
  position:relative;
  width:100%;
  aspect-ratio:1930.6 / 1626.4;         /* 0.8424 */
  container-type:inline-size;
  /* THE CANOPY HAS TO LAND ON THE MOUNTAINS ABOVE IT. His artboard leaves the
     top tenth of this section empty, so stacked flat there was a band of bare
     green between section three's rocks and the first tree. Rather than move
     his canopy up inside the section - which would drag the tree line up
     through his sign with it - the whole section rides up over section three
     by 19% of its own height, and its top is left transparent so the rocks
     show through. His composition is untouched; it just starts higher.

     19% of the height is 16.01% of the width, and a percentage margin resolves
     against width, so that is the number here. The canopy's first leaves then
     land about 100px above section three's bottom edge at a 1400px screen, and
     its solid part covers the join outright. */
  margin-top:-16.01%;
  overflow:hidden;
  isolation:isolate;
}

/* his ground, as a child rather than the section's own background, so the top
   of the section can stay transparent for the rocks behind it. His gradient
   runs #006837 at y 249.95 to #39b54a at y 1540.94 of 1626.4 - 15.37% to
   94.75% of the section, which is 1.59% to 93.90% of a box that starts at 14% */
.sec4 .ground{
  position:absolute; left:0; right:0; top:14%; bottom:0; z-index:0;
  background: var(--sec4-ground,
    linear-gradient(180deg,
    #006837 0%, #006837 1.59%, #39b54a 93.90%, #39b54a 100%));
}

/* THE GANTRY. It is in his render but not in his export, so this is section
   one's own truss cell repeated - the tile he asked to have "generate as many
   array as we need". It runs from under the sign's right edge to the screen
   edge, centred on the sign, so it fills whatever the screen is. */
.sec4 .truss{
  position:absolute; display:block;
  left:84.5%; right:0; top:29.50%; height:8.60%;
  background:url("../../assets/v2/section-01/truss-cell.webp") repeat-x left center;
  background-size:auto 100%;
  z-index:2;
}

.sec4 [data-at]{ position:absolute; display:block }
.sec4 img[data-at], .sec4 svg[data-at]{ height:auto }

.sec4 .z-back  { z-index:0 }   /* the canopy across the top */
.sec4 .z-road  { z-index:1 }
.sec4 .z-ground{ z-index:2 }   /* rocks and trees close over the road, as he drew them */
.sec4 .z-copy  { z-index:3 }
.sec4 .z-cloud { z-index:4 }

/* his type, his sizes, his weights, his squeeze — all read out of the export */
.sec4 .copy{
  position:absolute; margin:0; color:#fff;
  font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif;
}
.sec4 [style*="--sx"]{ transform:scaleX(var(--sx)); transform-origin:50% 0 }

/* THE SIGN COPY. His own marks put it hard against the right edge of the
   plate, so this is his instruction, not his file: a size down and centred.
   The box is the plate's inner area - from the right of his arrow to the
   plate's right edge - and the copy is centred in it both ways. Both blocks
   still carry his scale(.82 1). */
.sec4 .sign-copy{
  position:absolute; z-index:3;
  /* his new board is the hero's height, 290.66 against 297.95, and his new
     arrow is bigger and further in - it ends at 191.82 of his units where the
     old one ended at 157. Both numbers come straight off his file. */
  left:51.60%; right:14.03%; top:24.45%; height:17.83%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:1.1%;
}
.sec4 .sign-copy > *{ margin:0; transform:scaleX(0.82); transform-origin:50% 50%;
  white-space:nowrap; color:#fff; text-align:center;
  font-family:"Highway Gothic Expanded","Be Vietnam Pro",Arial,sans-serif;
  font-weight:400; }
.sec4 .sign-copy h2{ font-size:2.65cqw; line-height:1.06 }
.sec4 .sign-copy p { font-size:1.21cqw; line-height:1.2 }
.sec4 .body{
  font-size:1.347cqw; font-weight:500; line-height:1.076;
  text-align:center; color:#fdf6e4;
}
.sec4 .body span{ display:block; white-space:nowrap }

/* his button carries no label in the artwork — the label is its own text */
.sec4 .cta{
  font-size:1.184cqw; font-weight:800; text-align:center; color:#000;
  white-space:nowrap;
}

/* his second sign's shadow - see the markup for why it sits at this depth */
.sec4 .sign-shadow{
  position:absolute; z-index:2; background:#000; border-radius:1.368cqw;
  pointer-events:none;
}

/* the rock band's shadow is the band's own drawing taken to black - see the
   markup for why it is derived rather than a file of its own. A static layer,
   so the filter is computed once. */
.sec4 .rock-shadow{ filter:brightness(0) }